webpack分离打包css和less
github仓库:https://github.com/llcMite/webpack.git
为什么要分离打包?
答:刚开始学webpack的时候就很郁闷,明明没几个文件,打包出来体积特别的大,看着它体积大就是不爽
这里只需要一个插件(extract-text-webpack-plugin)就可以搞定了
webpack这里就不解释,不会的自己去官网看看,下面的配置文件是本人成功打包出来的配置,(插件是会更新)如果出现什么问题可以参考插件官方提供的用法,百度插件名字就可以找到插件官方用法了,这里要注意,不能重复配置css,我用的是less多一点,所以这里只研究了less的用法,不过sass用法差不多;
1)安装依赖
cnpm install less less-loader extract-text-webpack-plugin --save-dev
2)配置webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractCSS = new ExtractTextPlugin('stylesheets/reset.css'); const extractLESS = new ExtractTextPlugin('stylesheets/less.css'); module.exports={ entry:'./index.js', output:{ path:__dirname, filename:'build.js' }, module:{ rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.less$/i, use: extractLESS.extract([ 'css-loader', 'less-loader' ]) }, ] }, plugins: [ extractCSS, extractLESS ], }