1、webpack基本配置

webpack安装

• 安装本地webpack
• 安装webpack、webpack-cli两个
• 以上两个依赖都属于开发依赖，故使用命令：

npm i webpack webpack-cli -D
(当然，在此之前应该npm init -y初始化下)

webpack可以进行0配置

• 打包工具 -> 输出后的结果(js模块)

  • 举例：

    • 创建文件夹和文件：-src -> index.js

        index.js：   
        console.log('hello zz');
    

    • 执行命令：

    npx webpack

      - 这个npx webpack命令执行的其实是node_modules下的.bin下的webpack.cmd,内容如下：
      
      ```
          @IF EXIST "%~dp0\node.exe" (
              "%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %*
          ) ELSE (
              @SETLOCAL
              @SET PATHEXT=%PATHEXT:;.JS;=;%
              node "%~dp0\..\webpack\bin\webpack.js" %*
          )
      ```
      其中，~dp0代表当前木兰路，也就是说，当前目录如果存在node.exe，那么就执行第一个判断，显然，这里是不存在的，所以执行else的内容，也就是执行“%~dp0\..\webpack\bin\webpack.js”这个目录下的webpack.js
    

• 打包 (支持js模块化)

  • 写一个commonJS语法的模块化的文件,这样的语法是不能在浏览器中跑的，可以在node中跑
    • a.js

    let a = 'zz';
    
    module.exports = a;
    

    • index.js

    let str = require('./a.js');
    
    console.log(str);
    

  • 执行npx webpack，会Warning，这段Warning告诉我们没有设置mode，webpack就默认使用生产环境的模式，这样打包出来会比较小，同时，也告诉我们这个mode可以设置成开发环境。
  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/concepts/mode/

手动配置webpack

• 默认配置文件的名字 webpack.config.js,这个名字是在node_modules->webpack-cli->bin->config-yargs.js中配置的，默认有2种，为webpack.config.js和webpackfile.js
• 如果修改配置文件webpack.config.js的名字为其他的，比如weboack.config.my.js,那么我们去执行的时候，就要使用以下命令：

  npx webpack --config webpack.config.my.js
  

配置脚本

• 当然，我们一般会使用配置脚本去执行webpack

  • 在package.json文件中，配置scripts脚本:

      "scripts":{
          "build":"webpack --config webpack.config.my.js"
      }
  

    - 注意：脚本为json文件，不允许写注释。
    - 注意：build为key，可以写成任意的key；value中的webpack的意思是去自动查找webpack命令，找到后使用这个webpack去执行webpack --config webpack.config.my.js
  

  • 然后可以执行以下命令去打包：

      npm run build  
      //这里的build就是上面的key
  

  • 重点：假如build的值"webpack"，并且执行如下命令可以吗？

      npm run build --config webpack.config.my.js
  

    - 这是不可以的，因为--config webpack.config.my.js不会被认为是一个参数，那么可以写成如下：
    ```
        npm run build -- --config webpack.config.my.js
    ```
        - 这里的第一个-- 代表其后面的内容为字符串参数
        - 这样就相当于执行webpack --config webpack.config.my.js