About Webpack compiling scss files

CSS loader files are usually used with extract-text-webpack-plugin, we can write the scss file in the SRC directory of the source file, and then compile the CSS file into the output directory public by Webpack. This directory is the directory that our site needs to Reference.

1 varWebpack = require (' webpack '));2 varHtmlwebpackplugin = require (' html-webpack-plugin '));3 varExtracttextwebpackplugin = require (' extract-text-webpack-plugin '));4 varExtractcss =NewExtracttextwebpackplugin ("css/[name].css");//The parameter here is to configure the compiled CSS path and file name, relative to the path option in output5 varPath = require (' path ');6Module.exports = {7 resolve:{8extentions:["", ". scss"]9     },Ten entry:{ oneMain:__dirname + '/app/main.js ', aIndex:__dirname + '/app/index.js ' -     }, - output:{ thePath:__dirname + '/public ',//HTML files generated by the Htmlwebpackplugin plugin are stored under this directory -Filename: '/js/[name].js ',//compile the generated JS file to the root directory under the JS directory, if the JS directory does not exist automatically created -     }, - module:{ + loaders:[ -{test:/\.scss$/,loader:extractcss.extract ([' css ', ' sass ')])} +         ] a     }, at sassloader:{ -Includepaths:[path.resolve (__dirname, './app/css '))] -     }, - plugins:[ -         NewHtmlwebpackplugin ({title: ' Custom title2 ', template:__dirname + '/public/tempindex.html '}), - Extractcss in     ] -}

Note:new Extracttextwebpackplugin ("css/[name].css"), If the [name] placeholder is used, only the portal file referencing the Scss file is compiled, and the resulting CSS file name corresponds to the entry File.

If more than one portal file introduces the same scss file, and the entry property is configured with the vendor object, a vendor.css file is generated, and the source code for the Vendor.css file is the Scss file that the portal file references together ( Webpack.optimize.CommonsChunkPlugin can not only extract the common JS file can also extract the common CSS files, if not configured vendor, respectively, generate multiple CSS files with the same name as the portal File.

If more than one portal file refers to a different scss file, regardless of whether the entry property has a configuration vendor object, multiple CSS files with the same name corresponding to the portal file are Generated.

The [name] placeholder is typically used, and if only one of the portal nodes references the Scss file and only one scss file is referenced, you can specify any name without a placeholder.

About Webpack compiling scss files