webpack基础 -- 提取css

提取css

webpack版本 3.10.0
需要的插件 : extract-text-webpack-plugin
安装: npm install extract-text-webpack-plugin –save-dev

插件的使用

var path = require('path')
var extractTextWebpackPlugin = require('extract-text-webpack-plugin') // 提取公共css的插件


module.exports = {
  entry: {
    app:'./src/app.js'
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    publicPath:'./dist/',
    filename:'[name].min.js',
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:extractTextWebpackPlugin.extract({
          fallback:{ // 当不提取的时候用什么方式加载到页面中
            loader:'style-loader',
            options:{
              singleton: true,
              // transform:'./css.transform.js'
            }
          },
          allChunks: false, // 提取初始化的css   true, 提取所有的css
          use:[
            {
              loader: 'css-loader',
              options: {
                minimize: true, // 压缩
                modules: true, //引入模块
                localIdentName:'[path][name]_[local]_[hash:base64:5]', // 重新给引入的class命名
              }
            }
          ]
        })
      }
    ]
  },
  plugins:[
    new extractTextWebpackPlugin({
      filename: '[name].min.css', //  提取后的css文件名
    }),
  ]
}