wepack工程化09（webpack搭建开发环境和生产环境）

前面介绍了webpack的很多配置，今天我们把之前学过的汇总一下，搭建一个开发环境和生产环境的配置。

在配置之前，我们先看一下开发环境和生产环境都需要哪些配置。

开发环境：devServer,模块热更新，sourceMap,接口代理等；生产环境：提取公共代码，代码压缩，tree-shaking等，那有哪些是公用的呢？比如入口，loader处理，解析配置等。

所以我们的配置文件大致可以分为3个，base文件，dev文件，pord文件，在配置文件之间，可以通过webpack-merge来合并配置文件。

我们直接来看demo。

//webpack.base.conf.js
const path = require('path')

module.exports = {
  entry: {
    app: path.resolve(__dirname, '../src/app.js')
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname,'../src')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name:'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
}

base中都是一些基础的配置，除了入口和出口之外，还有一个js处理的babel-loader，以及图片资源和字体资源的处理。

//webpack.dev-conf.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: [
      {
        test: /\.less$/,
        use:[
            {
              loader: "style-loader",
              options: {
                sourceMap: true
              }
            },  
            {
                loader: 'css-loader',
                options: {
                  sourceMap: true
                }
            },
            {
                loader: 'less-loader'
            }
        ]
      }
    ]
  },

  devtool: 'inline-source-map',

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    contentBase: false, 
    compress: true,
    port: '8080',
    overlay: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]
})

module.exports = new Promise((resolve, reject) => {
  resolve(devWebpackConfig)
})

开发环境中给style-loader和css-loader加上sourceMap,然后增加了一个配置 devtool: 'inline-source-map'，这两个的作用在于，会把当前的样式，js与对应的文件行号对应，方便调式。

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:[
              {
                  loader: 'css-loader'
              },
              {
                  loader: 'less-loader'
              }
          ]
        })
      }
    ]
  },
  devtool: 'scoure-map',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/[name].[chunkhash].js',
    chunkFilename: 'static/js/[id].[chunkhash].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: true
  },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true,
      parallel: true
    }),
    new ExtractTextPlugin({
      filename: 'static/css/[name].[hash:5].css',
      allChunks: true,
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: true
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })
  ]
})

module.exports = webpackConfig

之前再提取公共代码那一篇文章中说过，CommonsChunkPlugin在webpack4中已经不支持了，所以这里换成了(效果基本是一样的)

  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: true
  },

//webpack脚本
 "dev": "webpack-dev-server --env development --open --config build/webpack.dev.conf.js",
  "build": "webpack --env production --open --config build/webpack.prod.conf.js"

当然这只是一个比较基础的配置，大家可以根据自己的需求加一些新的配置。