Webpack单独打包编译less

怎样实现单独打包

最近也是在使用webpack做项目，网上找了下配置方法，最后选用了一个，不得不说确实好用！但是最后打包过后发现webpack会将css一起打包到最后的js文件中去，造成这个js文件体积十分庞大，于是就考虑先把第三方库去除掉。这一步倒是很好实现，只需要配置下externals就可以了。

config.externals = {
     'angular':'angular',
     'bootstrap':'bootstrap'
 };

去除第三方库后发现还是有点儿大，于是又考虑把css提取出来生成单独的css文件，毕竟css不会影响页面的加载，如果放倒js里面就很难说了。

怎样让css可以单独打包呢？其实也很简单，只要安装一个extract-text-webpack-plugin就可以了。

var ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].[hash].css');

引入这个插件，然后配置loader

loaders: [{
  test: /\.css$/,
  loader: isTest ? 'null' : extractCSS.extract('style','css')
}]

最后在插件中注册一下

config.plugins.push(
  extractCSS
)

大功告成，我们在js中import的css文件最终都会打包成一个独立的css文件，赞！

怎样实现less的打包处理

随着预编译语言的兴起，前端开发越来越倚重于less、sass、styles等，我想在项目中使用less来开发样式，这样可以节省很多开发量，但是页面中只想引入一个css文件，这就需要将less编译成css文件，那么结合上面一步我们应该怎么实现这个功能呢？

我参考了extract-text-webpack-plugin文档上的例子

let ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

然后发现less确实打包了，但是只打包成了一个less文件，这当然不是我想要的，看来这个loader必须修改。

loaders : [{
    test : /\.(less|css)$/,
    loader: ExtractTextPlugin.extract('style', 'css!less')
}]

修改后的loader，这次应该没问题了吧！但是。。。

ERROR in Cannot find module 'less'

怎么会是这个结果？？？配置代码看起来并没有什么问题，less-loader也已经安装了，真是郁闷！网上找了很久终于找到了答案：原来不仅仅安装less－loader就完了，还需要安装less，大概想要将less编译成css还是需要less模块来完成吧。

cnpm install less --save-dev

run一下，完美！

使用webpack有一小段时间了，不断给我带来惊喜，不知道还有什么功能没有学习到，希望这种良心工具越做越好。