webpack打包样式成独立文件

2018年12月15日Web前端

用惯了脚手架,想自己学习下webpack方面的知识,于是便动手了。

一、打包css文件

首先安装依赖,css-loader是用来加载css文件,style-loader是用<style></style>标签将样式引入页面的,要注意顺序,必须先css-loader再style-loader。

npm install css-loader style-loader --save-dev

安装完成后,在webpack.config.js中的rules下增加规则:

test: /\.css$/,
exclude: /node_modules/, // 排除node\_modules文件夹
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}]

运行下npm run build(webpack --mode production),可以发现样式在浏览器中生效了。

二、打包less

打包less的话,要比打包css多一个less转css的过程,依旧先安装依赖,less-loader是加载less文件的,而less是编译less到css的工具,loader的调用顺序也是要注意的啊。

npm install less-loader less --save-dev

再配置下webpack,

test: /\.less$/,
exclude: /node_modules/,
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}, {
    loader:"less-loader"
}]

三、打包sass

打包sass需要两个依赖,分别是node-sass与sass-loader,前者是编译sass到css的工具,后者是加载sass的loader。

npm install node-sass sass-loader --save-dev

增加配置:

test: /\.sass|scss$/,
exclude: /node_modules/,
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}, {
    loader:"sass-loader"
}]

四、单独成文件

webpack打包后并没有生成对应的css文件,而是将css文件打包在了js中,假如我们需要单独生成对应的css文件该怎么办?

我们可以使用mini-css-extract-plugin插件,独立打包出css文件,并在html中引用对应的css文件,

npm install mini-css-extract-plugin --save-dev

在loader中增加该loader,以css为例,

test: /\.css$/,
exclude: /node_modules/,
use: [{
    loader:MiniCssExtractPlugin.loader
}, {
    loader:"style-loader"
}, {
    loader:"css-loader"
}]

不过run build后,会有报错,报错大概是ERROR in ./src/css/red.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: window is not defined,

不过西想,mini-css-extract-plugin是将css打包成独立的文件,而style-loader是将css以<style>标签的方式插入样式,是不是彼此存在冲突。

于是删除style-loader,发现可以正常打包,而且能生成单独的css文件了。

当然mini-css-extract-plugin插件的功能可不止如此,我只是用了他的一小点功能,详细的可以查看mini-css-extract-plugin插件