1、使用devServer开发服务器实现自动化时,发现如果 项目构建后路径写成
contentBase: resolve(__dirname, 'build'), 会出错,换了以下的写法后,就不会再报错了
static:resolve(__dirname, 'build')
关于devServer的配置:
devServer:{
static:resolve(__dirname, 'build'),
compress: true,
port: 3000, // 启动端口号
open: true //自动打开浏览器
}
2、按照以下方法去配置css兼容性问题的话:
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
会报错:“. PostCSS Loader has been initialized using an options object that does not match the API schema.\n - options has an unknown property 'plugins'.”
解决方法:
在webpack.config.js同级目录下新建文件postcss.config.js
写如下代码:
module.exports={
plugins:[
//使用postcss插件
require('postcss-preset-env')
]
}
3、在webpack5中使用eslint对js语法检查,使用eslint-loader,会报错
解决方法:安装如下插件:
npm i eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import -D
说明:eslint-webpack-plugin 用于替代eslint-loader(即将废弃)
在webpack.config.js配置文件中,做如下的配置:
const ESLintPlugin = require('eslint-webpack-plugin');
.....
plugins: [
...
//js语法检查
new ESLintPlugin({
fix: true,
extensions: ['js', 'json', 'coffee'],
exclude: '/node_modules/'
}),
],
在package.json文件中:
"eslintConfig": {
"extends": "airbnb-base",
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.config.js"
}
}
}
}