Vue笔记：WebPack模块加载器兼打包工具

ゝ一世哀愁。 2022-12-10 14:36 102阅读 0赞

### 文章目录 ###

*  Webpack
 *   *   *   *  安装
             *  配置
             *  使用webpack

# Webpack #

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

> #### 安装 ####

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

测试安装成功:

*  `webpack -v`
 *  `webpack-cli -v`

> #### 配置 ####

创建 `webpack.config.js` 配置文件

*  entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
 *  output：输出，指定 WebPack 把处理完成的文件放置到指定路径
 *  module：模块，用于处理各种类型的文件
 *  plugins：插件，如：热更新、代码重用等
 *  resolve：设置路径指向
 *  watch：监听，用于设置文件改动后直接打包

module.exports = { 
        entry: "",
        output: { 
            path: "",
            filename: ""
        },
        module: { 
            loaders: [
                { test: /\.js$/, loader: ""}
            ]
        },
        plugins: { },
        resolve: { },
        watch: true
    }

直接运行 `webpack` 命令打包

> #### 使用webpack ####

1.  创建项目
2.  创建一个名为 modules 的目录，用于放置 JS 模块等资源文件
3.  在modules下创建模块文件，如 hello.js，用于编写 JS 模块相关代码
    
        //暴露一个方法:sayHi
        exports.sayHi = function () { 
          document.write("<div>Hello WebPack</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"
            }
        };
6.  在项目目录下创建 HTML 页面，如 index.html，导入 WebPack 打包后的 JS 文件
    
        <!doctype html>
        <html lang="en">
        <head>
         <meta charset="UTF-8">
         <title>狂神说Java</title>
        </head>
        <body>
        <script src="dist/js/bundle.js"></script>
        </body>
        </html>
7.  在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!
8.  运行 HTML 看效果

**说明:**

# 参数 --watch 用于监听变化
    webpack --watch