Webpack学习笔记（四） —— 配置文件分离提取

webpack的配置进行合并和提取公共配置

1. 安装webpack-merge
cnpm i webpack-merge --save-dev
2. webpack.common.js文件（删除原webpack.config.js）

   var HtmlWebpackPlugin = require('html-webpack-plugin');
   const  {CleanWebpackPlugin}  = require('clean-webpack-plugin');
   module.exports = {
     entry: './src/index.js',
     module:{
         rules:[
           //   用style-loader和css-loader处理css文件
             {
               test: /\.(png|jpe?g|gif)$/i,
               use: [
                 // 'file-loader',
                 {
                   loader: 'url-loader',
                   options: {
                     limit: 30000,
                   },
                 },
                   {
                     loader: 'image-webpack-loader',
                     options: {
                       mozjpeg: {
                         progressive: true,
                         quality: 65,
                       },
                       // optipng.enabled: false will disable optipng
                       optipng: {
                         enabled: false,
                       },
                       pngquant: {
                         quality: [0.65, 0.90],
                         speed: 4,
                       },
                       gifsicle: {
                         interlaced: false,
                       },
                       // the webp option will enable WEBP
                       webp: {
                         quality: 75,
                       },
                     },
                   
                   },
                   
               ],
             }
             
         ]
     },
     plugins: [
     new HtmlWebpackPlugin(),
     new CleanWebpackPlugin(),
     ],  
   };
   

3. webpack.dev.js文件（开发环境）

   const path = require('path');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const commonConfig=require('./webpack.common')
   const merge=require("webpack-merge")
   let devConfig = {
     mode:"development",
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'main.js'
     },
     module:{
       
         rules:[
           //   用style-loader和css-loader处理css文件
             {
               test:/\.(c|sc|sa)ss$/,
               use:[        
                   MiniCssExtractPlugin.loader,
                 {
                   loader:'css-loader',
                   options:{
                     sourceMap:true
                   }
                 },
                 {
                   loader: 'postcss-loader',
                   options: {
                     ident: 'postcss',
                     sourceMap:true,
                     plugins: [
                       require('autoprefixer')({browsers:['> 0.15% in CN']})
                       
                     ]
                   }
                 },
                 {
                   loader:"sass-loader",
                   options:{
                     sourceMap:true
                   }
                 }
               ]
             },
         ],
         
     },
     plugins:[
       new MiniCssExtractPlugin({
         // filename: '[name].css',
         // 增加hash值
         filename: '[name].css',
         path: path.resolve(__dirname, 'dist'),
         chunkFilename: '[id].css',
         ignoreOrder: false, 
       }),
     ]
   };
   module.exports=merge(commonConfig,devConfig)
   

4. webpack.prod.js文件（生产环境）

   const path = require('path');
   const commonConfig=require('./webpack.common')
   var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const merge=require("webpack-merge")
   let prodConfig = {
     mode:"production",
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'main[hash].js'
     },
     module:{
         rules:[
           //   用style-loader和css-loader处理css文件
             {
               test:/\.(c|sc|sa)ss$/,
               use:[
                 
                   MiniCssExtractPlugin.loader,
                 
                 {
                   loader:'css-loader',
                   options:{
                     sourceMap:true
                   }
                 },
                 {
                   loader: 'postcss-loader',
                   options: {
                     ident: 'postcss',
                     sourceMap:true,
                     plugins: [
                       require('autoprefixer')({browsers:['> 0.15% in CN']})
                       
                     ]
                   }
                 },
                 {
                   loader:"sass-loader",
                   options:{
                     sourceMap:true
                   }
                 }
               ]
             },
         ]
     },
     plugins: [
       new MiniCssExtractPlugin({
         // filename: '[name].css',
         // 增加hash值
         filename: '[name][hash].css',
         path: path.resolve(__dirname, 'dist'),
         chunkFilename: '[id].css',
         ignoreOrder: false, 
       }),
     new OptimizeCssAssetsPlugin(),
     ],
     
   };
   module.exports=merge(commonConfig,prodConfig)
   

5. 在package.json文件中scripts脚本中修改增加

   	// 使用npm run build打包（开发环境）
       "build": "npx webpack --config webpack.dev.js",
       // 使用npm run dist打包（生产环境）
       "dist": "npx webpack --config webpack.prod.js"