webpack4.x使用注意事项

webpack4.x版本与之前相比有了较大的改变，在学习4.x版本的路上遇到了很多坑，今天就来总结下以备今后查阅。

1. 安装
   webpack4的安装增加了webpack-cli模块的依赖，正确的安装如下：
   npm i -D webpack
   npm i -D webpack-cli

2. 使用
   (1) webpack4不需要定义入口点和输出文件，默认将./src/index.js作为默认入口点，而在./dist/main.js中吐出这个包。
   (2) webpack4默认不需要配置文件，只需要在package.json中定义–mode。
   "scripts": { "dev" : "webpack --mode development", "build": "webpack --mode production" }

3. css modules和postcss-loader的使用
   css modules使得css也可以模块化，避免class样式的全局污染，具体代码如下：
   

   由于css在不同的浏览器中需要不同的前缀，为了解决这一问题，我们采用postcss-loader，在使用postcss-loader时，我们需要配置postcss.config.js文件。
   

4. 问题分析
   (1) webpack XX XX 进行文件打包的时候报错：
   

   出错原因： webpack可能未全局安装，所以此时不可以直接使用webpack这个命令。
   解决办法：采用局部webpack node_modules.bin\webpack xxx xxx

   (2) npm start:
   start 是个特殊的命令，所以使用start不需要使用run;否则就需要npm run XXX(例如：npm run build)

   (3) webpack4方式运行报错和警告的解析
   
   出错原因： webpack.config.js缺少mode的配置
   解决办法： mode: ‘production’
   
   警告原因： 展示性能提示。如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
   解决办法：performance: { hints: false }

出错原因：babel-loader版本比较新，同时需要安装其他的依赖

解决办法：1. 降低babel的版本 npm i babel-loader@7 babel-core babel-preset-env babel-preset-react --save-dev
2. 安装babel-loader@8.x所需要的依赖模块 npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev， 同时还需要更改webpack.config.js里面的配置，配置如下：

出错原因： 由于有关css的loader有两个，所以在use中写多个loader需要以以下的样式写入{test: /\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}]}

4. 详细配置
   (1) source-map 生成map文件，规定编译后的文件与源码文件之间的对应规则，详细参考： https://www.cnblogs.com/axl234/p/6500534.html
   (2) resolve 配置webpack查找文件的规则，详细参考：https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
   https://segmentfault.com/a/1190000006178770

参考博客:http://www.cnblogs.com/xfz1987/p/8473719.html