webpack 安装及基本使用及遇到的坑

╰+攻爆jí腚メ 2024-04-17 22:02 8阅读 0赞

## 安装webpack ##

#### step.1 全局安装webpack ####

$ cnpm install --save-dev webpack -g
    $ cnpm install --save-dev webpack-cli -g

#### step.2 配置webpack.config.js文件 ####

//var path = require('path'); 
    module.exports = { 
      entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
      output: { 
        path: __dirname + "/dist",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      },
      mode: 'development' // 设置mode
    }

#### 使用打包命令 ####

1.  在配置了webpack.config.js文件后，可直接直接使用`$ webpack`
2.  可使用package.json 文件中，指定的脚本命令 见`坑2`

## 使用过程中遇到的坑 ##

#### 坑1. 全局、本地安装webpack后，不能用，也不查看`webpack -v` ####

$ webpack src/index.js dist/bundle.js
    One CLI for webpack must be installed. These are recommended choices, delivered          as separate packages:
     - webpack-cli (https://github.com/webpack/webpack-cli)
       The original webpack full-featured CLI.
    We will use "npm" to install the CLI via "npm install -D".
    Do you want to install 'webpack-cli' (yes/no): no
    You need to install 'webpack-cli' to use webpack via CLI.
    You can also install the CLI manually.

**原因**  
webpack4，命令行相关的内容都移到 webpack-cli，所以还需要安装 webpack-cli，否则就出出上面的问题

**解决办法**

$ cnpm install webpack-cli -g

检查一下是否正常安装webpack

$ node -v
    v8.11.3
    $ webpack -v
    4.39.3
    $ webpack-cli -v
    3.3.7

#### 坑2 . 使用 `webpack src/index.js dist/bundle.js` 报错 ####

$ webpack src/index.js dist/bundle.js
    ...
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this 
    value. Set 'mode' option to 'development' or 'production' to enable defaults 
    for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https         ://webpack.js.org/configuration/mode/

**原因**  
打包时，指令中没有指定mode选项，或配置文件中没有指定mode选项

**解决办法.1**  
使用下面指令

$ webpack --mode production src/index.js dist/bundle.js

**解决办法.2**  
使用webpackage.config.js配置入口及目录js，同时在package.json中的 script中，声明如下

*webpackage.config.js*

//webpackage.config.js
    //var path = require('path'); 
    module.exports = { 
      entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
      output: { 
        path: __dirname + "/dist",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      },
      mode: 'development' // 设置mode
    }

*package.json*

//package.json
      "scripts": { 
        "test": "echo \"no test function\"",
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      }

定义好后，直接使用package.json中定义的脚本

$ npm run build

$ webpack

#### 坑3 . 使用 `webpack --mode production src/index.js dist/bundle.js` 报错 ####

$ webpack ./src/index.js dist/bundle.js --mode production
    ...
    ERROR in multi ./src/index.js dist/bundle.js
    Module not found: Error: Can't resolve 'dist/bundle.js' in 'E:\bing_study\webpack__project'
     @ multi ./src/index.js dist/bundle.js main[1]

**原因**  
webpack版本过高,原来的命令已经不适用了

**解决办法**

$ webpack ./src/index.js -o dist/bundle.js --mode production