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
    })
  ]
}