webpack4.x版本与之前相比有了较大的改变,在学习4.x版本的路上遇到了很多坑,今天就来总结下以备今后查阅。
-
安装
webpack4的安装增加了webpack-cli模块的依赖,正确的安装如下:
npm i -D webpack
npm i -D webpack-cli -
使用
(1) webpack4不需要定义入口点和输出文件,默认将./src/index.js作为默认入口点,而在./dist/main.js中吐出这个包。
(2) webpack4默认不需要配置文件,只需要在package.json中定义–mode。
"scripts": { "dev" : "webpack --mode development", "build": "webpack --mode production" }
-
css modules和postcss-loader的使用
css modules使得css也可以模块化,避免class样式的全局污染,具体代码如下:
由于css在不同的浏览器中需要不同的前缀,为了解决这一问题,我们采用postcss-loader,在使用postcss-loader时,我们需要配置postcss.config.js文件。
-
问题分析
(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'}]}
- 详细配置
(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