之前配置项目的时候也有这些坑,所以今天配置新项目的时候顺便记录一下。
新建项目后安装less
npm install less less-loader --save
安装成功后找到webpack.base.conf.js文件,在以下位置增加less配置支持
module: {
rules: [
{}...........
//以上部分为项目配置后自带的,只需要在尾部添加即可
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
默认安装的less版本较高
可能会报以下错误
TypeError: this.getOptions is not a function等…
不慌,卸载重装就是了
npm uninstall less-loader
npm install less-loader@5.0.0
重新运行项目就ok了
配置项目在浏览器运行的小图标
//在index.html引入
<link rel ="shortcut icon" type="image/x-icon" href="./favicon.ico">
//在webpack.base.conf.js添加如下配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'favicon.ico'
})
],