Linda0821
commented
5 years ago 1.extract-text-webpack-plugin是分离css工具，optimize-css-assets-webpack-plugin是压缩css的工具。两者结合使用，就可以打包出分离的css
![Uploading image.png…]()
2.引入scss文件
在配置文件module:{rule:[{
test: /.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]}
3.具体配置可参考下面的webapck.config.js
const webpack = require("webpack") const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') //const uglify = require('uglifyjs-webpack-plugin') //压缩js插件 const extractTextPlugin = require("extract-text-webpack-plugin")//css 分离 //const extractCSS = new extractTextPlugin("css/[name].[hash:6].css") const extractCSS = new extractTextPlugin({ filename: 'css/[name].[md5:contenthash:hex:6].css', allChunks: true }); const extractSCSS = new extractTextPlugin({ filename: 'css/[name].[md5:contenthash:hex:6].css', allChunks: true }); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件 module.exports = { //注意这里是exports不是 entry: './src/js/index.js', output: { publicPath:"./", path: path.resolve(__dirname + "/dist"), //打包后的js文件存放的地方 filename: "js/[name].[hash:6].js" //打包后的js文件名 }, plugins: [ extractCSS, extractSCSS, new OptimizeCssAssetsPlugin(),//压缩css new webpack.optimize.UglifyJsPlugin(),//new uglify(),//压缩js new HtmlWebpackPlugin({ filename: 'index.html', template:'src/index.html' }) ], module: { rules: [ //1.0的是loaders //处理js中的loader { test: /\.js$/, loader: 'babel-loader', include: path.resolve(__dirname, '/src'), //指定打包的文件 exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包时间 }, /*{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, //scss打包后在html里引入 */ { test: /\.scss$/, use: extractTextPlugin.extract({ fallback:'style-loader', publicPath: "../", use:[{ loader:'css-loader' },{ loader:'sass-loader' }] }) }, //处理css中的loader { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", publicPath: "../", use: [ { loader: 'css-loader', options:{ minimize: true //css压缩 } } ] }) }, //处理html模板中的loader { test: /\.html$/, loader: 'html-loader' }, //处理ejs模板中的loader,以.tpl后缀结尾的 { test: /\.tpl$/, loader: 'ejs-loader' }, //处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩) { test:/\.(jpg|png|gif|bmp|jpeg)$/, loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]' } ] } };
附录：package.json
{ "name": "luck-draw", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "prebuild": "rm -rf dist", "build": "webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.1.5", "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-latest": "^6.24.1", "babel-runtime": "^6.26.0", "css-loader": "^1.0.0", "ejs-loader": "^0.3.1", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^2.0.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^4.3.1", "jquery": "^3.3.1", "less": "^3.9.0", "loader": "^2.1.1", "node-sass": "^4.11.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "uglifyjs-webpack-plugin": "^1.3.0", "url-loader": "^1.1.1", "webpack": "^3.12.0" } }
1.extract-text-webpack-plugin是分离css工具，optimize-css-assets-webpack-plugin是压缩css的工具。两者结合使用，就可以打包出分离的css
2.引入scss文件 如下配置，会在js中动态添加scss中的css样式到html中，以style方式引入
3.如下配置，会直接打包到css文件中，以link样式引入； 具体配置可参考下面的webapck.config.js
附录：package.json