webpack的安装及使用

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装

最好以管理员身份运行

npm install webpack -g
npm install webpack-cli -g

命令运行后，测试一下是否安装成功

webpack -v
webpack-cli -v

使用

  1. 创建一个空文件夹，用IDEA打开

  2. 创建一个名为modules的目录，用于放置JS模块等资源文件

  3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

    exports.sayHi = function () {
    document.write("<div>hello!!!!</div>")
};

  4. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

    //require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

  5. 在项目目录下创建webpack.config.js配置文件，使用 webpack 命令打包
    （注意：如果打包失败，可以试试以管理员身份运行）

    module.exports = {
    entry:'./modules/main.js',
    output:{
        filename:"./js/bundle.js"
    }
};

    出现上边这个图片就是打包成功了！然后就会出现下面的JS文件：

  6. 在项目目录下创建HTML页面，如 index.html，导入webpack打包后的JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="dist/js/bundle.js"></script>
</body>
</html>

  1. 运行HTML看看效果

    最终效果如下：

知识点

  • entry：入口文件，指定webpack用哪个文件作为项目的入口

  • output：输出，指定webpack把处理完成的文件放置到指定路径

  • module：模块，用于处理各种类型的文件

  • plugins：插件，如：热更新、代码重用等

  • resolve：设置路径指向

  • watch：监听，用于设置文件改动后直接打包

    webpack --watch
posted @ 2020-05-19 18:02  hellowen2020  阅读(347)  评论(0)    收藏  举报