第一章 入门
1、提取css文件报错Cannot find module 'webpack/lib/Chunk'
- 重装webpack webpack-cli
- 修改plugins配置
plugins: [
new ExtractTextPlugin({
filename: `[name]_[md5:contenthash:hex:8].css`
})
]
2、webpack4废弃了minimize
压缩css文件使用optimize-css-assets-webpack-plugin插件
第二章 配置
1、output.path和output.publicPath的区别
- path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下
- publicPath 并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片
参考： https://blog.csdn.net/qq_39207948/article/details/80631435
第三章 实战
1、es6
不加版本直接安装babel-core和babel-loader：
If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7
解决：
npm i --save-dev babel-loader@7.1.5
原因：babel-loader和babel-core版本不对应所产生的，
- babel-loader 8.x对应babel-core 7.x
- babel-loader 7.x对应babel-core 6.x
2、typscript学习推荐书籍
《Learning TypeScript中文版》
配置方法：
- 安装ts编译插件
npm i -D typescript awesome-typescript-loader
- 新建配置文件tsconfig.json
{
"compilerOptions": {
"module": "CommonJS",
"target": "es5",
"importHelpers": true
}
}
- 修改webpack.config.js
resolve: {
extensions: ['.ts', '.js']
}
module: {
rules: [
{
test: /\.ts$/,
use: "awesome-typescript-loader"
}
]
}
3、scss学习推荐书籍
《Sass与Compass实战》
4、安装vue-loader和vue-template-compiler后报错
vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
解决：
- 把安装版本改为14的
npm i -D vue-loader@14
5、web-webpack-plugin和html-webpack-plugin的区别
web-webpack-plugin用法参考，资料很少，后期找到再补充，有一个多页面营业的功能，用的会多一点
https://www.npmjs.com/package/web-webpack-plugin
html-webpack-plugin一般都用这个组件的多，用法网上很多
