webpack高级概念Develoment 和 Production 不同环境的配置 (系列四)

因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得重复修改webpack.config.js配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。

在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 webpack.prod.js 和 webpack.base.js 三个文件

webpack.dev.js ：是开发环境

webpack.prod.js ：是生产环境

webpack.base.js ：是开发环境和生产环境都用到的共同配置

这几个文件之间的结合靠'webpack-merge'这个插件。

安装

npm i webpack-merge -D

开发配置

//webpack.dev.js

const webpack=require('webpack')
const merge = require('webpack-merge')
//引入公共的webpack配置
const baseConfig=require('./webpack.base')

const devConfig={
  mode: 'development', 
  devtool: 'cheap-module-eval-source-map',
//热模块更新，开发环境独有
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
//树摇配置，开发环境默认没有，需要配置
  optimization: {
    usedExports: true
  },
//自启服务
  devServer: {
    contentBase: './dist',
    // open: true, //自动打开浏览器
    // port: 8080,
    hot: true,　//启用webpack的热模块替换功能
    //hotOnly: true　
    //devServer.hot在没有页面刷新的情况下启用热模块替换作为构建失败时的后备
  }
}
//将公告配置和开发配置合并暴露出去
module.exports=merge(baseConfig,devConfig)

生产配置

//webapck.prod.js

const merge = require('webpack-merge')
const baseConfig=require('./webpack.base')

const prodConfig={
  mode: 'production', 
  devtool: 'cheap-module-source-map'
}

module.exports=merge(baseConfig,prodConfig)

但是这两个文件还有大量重复的代码，新建 webpack.base.js

//webpack.base.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports={
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname,'dist')
  },
  module: {
    rules:[
      {
        test: /.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]', 
            outputPath: 'images/', 
            limit: 2048           
          }
        }
      },
      {
        test: /.css$/,
        use:[
          'style-loader',
          'css-loader',
          'postcss-loader' 
        ]
      },
      {
        test: /.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true 
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new cleanWebpackPlugin(),
  ]
}

修改 package.json 的 script :

./build/webpack.dev.js  配置文件路劲

{
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },
}

开发环境：运行 npm run dev ，打开浏览器访问 http://localhost:8080/ 就可以看到结果，由于开启了devServer，打包的文件在内存运行

生产环境：运行 npm run build ， 生成了dist打包文件，可将dist文件放在服务器上

打包文件dist路劲配置

在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 webpack.prod.js 和 webpack.base.js 三个文件，因为webpack配置文件路径变了，所以

输出的打包文件路劲要改变，打包文件dist夹路劲是和配置文件webpack.dev.js同级的

配置开发环境生成本地打包文件，package.json配置，

 "scripts": {
    "dev-build": "webpack --config ./build/webpack.dev.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },

在webpack.base.js中修改output，CleanWebpackPlugin配置（每次打包前清除旧的打包文件）

output: {
        filename: '[name].js',
　　　　//__dirname绝对路径默认与webpack.dev.js同级，然后走到lesson根路劲下的dist路劲打包
        path: path.resolve(__dirname, '../dist')
    }


    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), 
　　　　　　//然后删除dist打包文件夹
        new CleanWebpackPlugin(['dist'], {
　　　　　　　　//__dirname默认与webpack.dev.js同级，回到根路劲，然后删除dist打包文件夹
            root: path.resolve(__dirname, '../')
        })
    ],

 运行npm run dev-build, 看下dist文件夹是否在跟路劲lesson下，以及重新打包，旧的dist文件夹是否会重新清除（前提清除的路劲要正确）

常用的生产和开发webpack配置

webapck.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/index.js',
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            child: path.resolve(__dirname, '../src/a/b/c/child')
        }
    },
    module: {
        rules: [{ 
            test: /.jsx?$/, 
            include: path.resolve(__dirname, '../src'),
            use: [{
                loader: 'babel-loader'
            }]
        }, {
            test: /.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            } 
        }, {
            test: /.(eot|ttf|svg)$/,
            use: {
                loader: 'file-loader'
            } 
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), 
        new CleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, '../')
        })
    ],
    optimization: {
        runtimeChunk: {
            name: 'runtime'
        },
        usedExports: true,
        splitChunks: {
      chunks: 'all',
      cacheGroups: {
          vendors: {
              test: /[\/]node_modules[\/]/,
              priority: -10,
              name: 'vendors.js',
          }
      }
    }
    },
    performance: false,
    output: {
        path: path.resolve(__dirname, '../dist')
    }
}

webpack.prod.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    module: {
        rules:[{
            test: /.scss$/,
            use: [
                MiniCssExtractPlugin.loader, 
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        }, {
            test: /.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].chunk.css'
        })
    ],
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js'
    }
}

module.exports = merge(commonConfig, prodConfig);

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true
    },
    module: {
        rules: [{
            test: /.scss$/,
            use: [
                'style-loader', 
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        }, {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js',
    }
}

module.exports = merge(commonConfig, devConfig);