webpack配置笔记总结-持续更新
前言:前端内容更新迭代太快,一个人记住这些东西很困难,所以记笔记就是一个很好方法。
记一篇自己能看懂的笔记;
记一篇有思维索引的笔记。
webpack处理
安装
安装:cnpm i webpack@3.8.1 -g
安装:cnpm i webpack@3.8.1 -D
注意:4版本问题较多,建议使用3版本
可能的报错
报错 : TypeError: Cannot read property 'presetToOptions' of undefined
原因 : 我把webpack的版本进行了转换3.8.1 <--> 4,打包报错。
解决 : 1 根据提示,把const statsPresetToOptions = require("webpack").Stats.presetToOptions;中间Stats下标的这个.删掉。保存后再次运行webpack就成功了!
2 降版本到3.8.1;
报错 : mode没有配置,4版本需要配置mode;
注意
module里面的属性rules、loaders。4版本要使用rules
ps: 大部分报错,如果找不到问题,就降版本。
style处理
打包css
安装、使用
cnpm i style-loader css-loader -D
使用 require("style-loader!css-loader![接文件路径名]")
打包sass、less
安装、使用
cnpm i style-loader css-loader sass-loader node-sass -D
使用 require("style-loadler!css-loader!sass-loader![接文件路径名]")
cnpm i style-loader css-loader less-loader less -D
使用 require("style-loadler!css-loader!lass-loader![接文件路径名]")
style-loader
把样式代码转换成js字符串的样式代码
css-loader
转换成commonJS模块规范
postcss-loader
处理转义css代码
可能的报错处理
sass-loader 8版本可能报错,建议降低到7版本;
lass-loader 6版本可能报错,建议降低到4版本;
脚本处理
打包js等
安装、使用
cnpm i babel-loader babel-core babel-preset-env -D
//配置.babelrc
{
"presets": [
"env"
]
}
cnpm i babel-preset-stage-0 -D
处理es7语法
{
"presets": [
"env",
"react",
"stage-0"
]
}
可能的报错处理
babel-loader和babel-core版本只能相差1个版本;
文件处理
打包文件
安装使用
cnpm i url-loader file-loader -D
test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)/
// woff|woff2|eot|ttf 处理iconfont字体
resolve
使用
1 配置别名
alias:{ }
插件
工具
cnpm i source-map -D
在浏览器上得到打包之前的文件
使用:webpack --devtool source-map
cnpm i webpack-dev-server@2.9.3 -g
cnpm i webpack-dev-server@2.9.3 -D
起服务的插件
使用: webpack-dev-server --inline --hot
报错: webpack4版本暂不支持
热更新报错,需要使用 webpack.HotModuleReplacementPlugin 插件
cnpm i html-webpack-plugin -D
自动注入插件
使用: 配置文件plugins配置
报错: 4版本可能不兼容,使用3版本
cnpm i open-browser-webpack-plugin -D
自动打开浏览器插件,因为 webpack-dev-server 如果使用0.0.0.0 和open会有问题
使用: 配置文件plugins配置
cnpm i extract-text-webpack-plugin -D
样式抽离插件,已废弃,也可以用
使用: 配置
cnpm i cssgrace -D
代码美化,换行
cnpm i autoprefixer -D
自动补全,