webpack 打包入门

webpack入门

• 今天打算学习下webpack打包工具，结果发现挺多坑的
  1. 版本问题
     因为之前使用过webpack，所以用的是旧版本，但是打包的时候发现识别不了webpack和npx webpack这2个命令行，我怀疑是版本问题，我就把全局的webpack和webpack-cli卸载掉重新安装指定的版本。

     // 国内还是建议使用cnpm  npm install -g cnpm -registry=https://registry.npm.taobao.org
     // 这里是使用淘宝的镜像 百度可以找到
     cnpm i [email protected] --save-dev // 安装对应版本
     cnpm i [email protected] --save-dev // 可以安装到全局 -g
     

     这里有个问题比较奇怪就是我安装全局之后，还要求我重新安装到–save-dev去。我认为和webpack的指定模式有关，因为在package.json上需要配置，所以需要重新安装，不过也没有影响，按照提示安装即可。
  2. 命令行使用webpack
     只是安装了webpack是无法直接命令行使用的，还需要安装webpack-cli
  3. 版本设置
     大家根据教程学习的时候最好安装对应版本，不然可能会遇到奇怪的问题。
  4. 入门配置
     好像到webpack4.0之后就需要配置文件，我之前用的时候是可以直接打包的，不过也没关系，我们更具4.0的步骤一步步做就好。
     其实webpack有点没写明白，对新手不太友好，我这里写下我配置的文件和注意的地方。给大家参考下。
     在项目开始做之前最好先新建一个package.json

     npm init -y
     

     安装完webpack和webpack-cli之后就可以看到package.json已经有了对应的信息。
     我们需要修改下输出的文件。
     package.json

     	 {
         "name": "webpack",
         "version": "1.0.0",
         "description": "",
     +   "private": true,
     -   "main": "index.js",
        ****
       }
     

     便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。这是官方的说法。
     配置完直接打包会发现有问题
     

     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/
     

     这是由于webpack打包有2种模式，我们需要指定它。
     我们在package.json文件添加2行
     package.json

        "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
     +    "dev": "webpack --mode development",
     +   "build": "webpack --mode production"
       },
     

     我们在package.json同目录下新建一个webpack.config.js文件配置好入口和出口。
     关于webpack.config.js这个文件的说明大家浏览官方文档就可以了解的比较清楚。官方文档
     webpack.config.js

     const path = require('path')
     module.exports ={
       entry:path.join(__dirname,'./src/index.js'), // 入口文件路径
       output:{
         path:path.join(__dirname,'./dist'),// 出口的文件路径
         filename:'main.js'	// 出口文件名
       },
       mode:'development' // 指定模式
     }
     

  5.完成
  这个时候运行打包命令就可以了。