webpack提取css代码 | 易学教程

先建好webpack.config.js文件，在里面写好一个大大的module.exports = { } ，然后配置都往大括号里填

入口：entry

entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串

entry:{
  app:'./app.js',
}

出口：output

指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」

output:{
    path: path.resolve(__dirname, 'dist'),   //  打包输出文件地址
    filename:'[name].[hash:5].js',           //  生成文件名称
    chunkFilename: '[name].bundle.js',       //  依赖文件名称    
    publicPath: ''                           //  公共路径 
}

样式处理loader

接着就是配置loaders，对文件进行预处理

样式处理要使用css-loader ，style-loader，less-loader，sass-loader，

为了生成独立 .css 文件要使用插件ExtractTextWebpackPlugin

为了在css样式前加上前缀，使用未来css语法，优化css等使用postcss-loader,以及autoprefixer，postcss-cssnext，cssnano

举例：

module:{
  rules:[
      test:'/\.less$/',           // 里面放一个正则  用来匹配处理的文件 
      exclude:/node_modules/,     // 不处理这个文件里的
      use: ExtractTextWebpackPlugin.extract({
         fallback: {         //  use中的失败来使用fallback中的loader
          loader: 'style-loader',
          options: {
           singleton: true,      // 生成的style标签只有一个
                   transform: './css.transform.js'   // 通过条件改变css，可在js中改变css
               }
         },
         use:[
           {
              loader:'css-loader',
              options:{
                minimize: true,     //启用压缩
                modules: true,      //启用css模块
                localIdentName: '[path][name]_[local]--[hash:base64:5]'   //生成的标识符
              }
           },
           {
               loader: 'postcss-loader',
           options: {
                   ident: 'postcss',            //  配置id  建议命名postcss
                   plugins: [
                     require('autoprefixer')(),        //  添加前缀
                     require('postcss-cssnext')(),     //   支持新css语法
                     require('cssnano')()              //   css优化
                  ] 
               }
            },
           {
              loader: 'less-loader'
           }
        ]
     )}
  ]  ,
  plugins: [
    new ExtractTextWebpackPlugin({
        filename: '[name].min.css',
        allChunks: false
    })
  ]
}

来源：https://www.cnblogs.com/code-lzh/p/9953316.html

标签

Webpack

css

bundle

css样式