<《一个青年艺术家的画像》读后感 Webpack深入浅出loader>

Webpack基于scss生成css独立文件

虽然有style-loader, css-loader, sass-loader组合可以插入样式至head中，然而实际场景中我们更想要生成独立的CSS文件，同时也生成独立的JS文件，并且两者互相独立。
　　在写组合loader之前，这里是一个对多入口js的配置webpack.config.js
```javascript
const path = require('path');
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//获取多页面的每个入口文件，用于配置中的entry
function entries(globPath, fileExt) {
	//返回该路径下所有文件全名（包括目录）数组
	var files = glob.sync(globPath);
	var entries = {}, entry, dirname, basename;
	for(var i = 0; i < files.length; i++) {
			entry = files[i];
			//文件名
			basename = path.basename(entry, '.' + (fileExt === 'css' ? 'scss' : fileExt));
			//相对于entry目录的文件目录名
			dirname = path.dirname(entry).replace(`./src/${fileExt}/entry`, fileExt);
			entries[path.join(dirname, basename)] = entry;
	}
	return entries;
}

module.exports = {
	mode: 'development',
	entry: entries('./src/js/entry/**/*.js', 'js'),
	output: {
    path: path.resolve(__dirname, 'public/static/dist'),
    filename: '[name].[chunkhash].js'
	},
	plugins: [
		new CleanWebpackPlugin(),
	]
};
```
　　从entries方法可知，我们会把js/entry子目录下的所有js遍历，并且在public/static/dist目录生成同目录的js构建文件。
　　在这个基础上，我们再引入所有的scss文件，并且组合loader
```javascript
const path = require('path');
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	mode: 'development',
	entry: Object.assign(entries('./src/js/entry/**/*.js', 'js'), entries('./src/css/entry/**/*.scss', 'css')),
	output: {
    path: path.resolve(__dirname, 'public/static/dist'),
    filename: '[name].[chunkhash].js'
	},
	module: {
    rules: [
      {
				test: /\.scss$/,
				use: [{
					loader: 'file-loader',
					options: {
						name(file) {
							// folder 仅支持直接的文件，不支持多层
							return 'css/[folder]/[name].[hash].css';
						},
					}
				}, 'sass-loader']
			},
    ]
	},
	plugins: [
		new CleanWebpackPlugin(),
	]
};
```
　　a. sass-loader翻译scss成css
　　b. file-loader 生成 css/[folder]/[name].[hash].css 至output目录

然而这时有个问题，scss会生成同名的js文件（其实是css模块），如css/movie/movie_list.scss，会生成多余的文件public/static/dist/css/movie/movie_list.js ，这是由入口配置决定的，如果入口配置不设置scss，loader又不会运行，所以我们应该写一个plugin src/plugins/filter-create-plugin.js排除这些无用的js:
```javascript
// 过滤plugin
function FilterCreatePlugin() {
}
FilterCreatePlugin.prototype.apply = function(compiler) {
	compiler.hooks.shouldEmit.tap('FilterCreatePlugin', (compilation) => {
		let newAssets = {}
		// 理论会生成css/xxx/xx.js的css文件，此处去除
		for (k in compilation.assets) {
			if (!/css\/\S*\.js$/.test(k)) {
				newAssets[k] = compilation.assets[k]
			}
		}
		compilation.assets = newAssets
		return true;
	});
}

module.exports = FilterCreatePlugin
```
　　在webpack.config.js引入并使用
```javascript
const FilterCreatePlugin = require('./src/plugins/filter-create-plugin')

module.exports = {
	plugins: [
		new CleanWebpackPlugin(),
		new FilterCreatePlugin(),
	]
};
```
　　此时 src/css/entry/movie/movie_list.scss将只生成public/static/dist/css/movie/movie_list.[hash].css，目标实现。

如果觉得有帮忙，您可以在本页底部留言。

Webpack基于scss生成css独立文件

全部留言

我要留言