webpack4系列教程（五）：处理项目中的资源文件（二）

28次阅读

共计 1544 个字符，预计需要花费 4 分钟才能阅读完成。

1. 在项目中使用 less
在 src/assets/ 下新建 common.less：
body{
background: #fafafa;
padding: 20px;
}

在 main.js 中引入 common.less：
import ‘./assets/style/common.less’

安装 less-loader：
npm i less-loader -D

添加 rules：
{
test: /\.less$/,
use: [
‘style-loader’,
‘css-loader’,
‘less-loader’
]
}

打包之后，在浏览器打开 dist/index.html，less 文件中的样式已经通过 style 标签载入了：

2. 使用 MiniCssExtractPlugin
我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入 CSS 文件的方式实现呢？
这就需要使用一个插件，在 webpack3 中通常使用 ExtractTextWebpackPlugin，但是在 webpack4 中已经不再支持 ExtractTextWebpackPlugin 的正式版，而测试版本又不够稳定，因此我们使用 MiniCssExtractPlugin 替代。首先安装：
npm install –save-dev mini-css-extract-plugin

在 webpack.config.js 中引入并添加 plugins：
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

new MiniCssExtractPlugin({
filename: “[name].css”
}),

修改 CSS 和 less 的 rules：
{
test: /.css$/,
use: [
// ‘style-loader’,
{
loader: MiniCssExtractPlugin.loader
},
‘css-loader’
]
},
{
test: /.less$/,
use: [
// ‘style-loader’,
{
loader: MiniCssExtractPlugin.loader
},
‘css-loader’,
‘less-loader’
]
}

npm run build 之后，可见 head 中引入了一个 main.css 文件：

也正是我们在 common.less 和 modal.css 中的代码

3. postcss-loader
postcss-loader 可以帮助我们处理 CSS，如自动添加浏览器前缀。
npm i -D postcss-loader autoprefixer

在根目录下创建 postcss.config.js：
const autoprefixer = require(‘autoprefixer’)

module.exports = {
plugins: [
autoprefixer({
browsers: [‘last 5 version’]
})
]
}

修改 css 和 less 的 rules：
{
test: /\.css$/,
use: [
// ‘style-loader’,
{
loader: MiniCssExtractPlugin.loader
},
{loader: ‘css-loader’, options: { importLoaders: 1} },
‘postcss-loader’
]
},
{
test: /\.less$/,
use: [
// ‘style-loader’,
{
loader: MiniCssExtractPlugin.loader
},
‘css-loader’,
‘postcss-loader’,
‘less-loader’
]
}