1. 构建开辟环境

假如你一向追随我前面的博文，那末你对webpack的基础知识已有比较深入的理解了。之前，我们一向实行着：

npm run build

来打包编译输出我们的代码，本文我们来看看怎样构建一个开辟环境，来使我们的开辟变得轻易些。

1.1 webpack-dev-server

webpack-dev-server是一个简朴的小型的web效劳器，而且可以及时重载，设置也很简朴，起首装置：

npm install --save-dev webpack-dev-server

设置webpack.config.js:

devServer: {
    port: 8080,  // 端口号
    host: '0.0.0.0', // 主机名，设为该值可经由过程IP接见
    overlay: {
      errors: true // 毛病提醒
    }
  }

在package.json中增加敕令：

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.config.js"

实行：

npm run dev

可见我们的效劳已跑起来了：

1.2 source-map

在webpack打包源码时，我们会很难找到毛病的涌现位置，比方将源文件 sum.js、minus.js打包到bundle.js中，个中一个源文件涌现了毛病，仅仅会追踪到bundle.js中，这对我们来讲并不抱负。因而为了越发便利的找到毛病的原始位置，JavaScript为我们供应了 source-map的功用，将编译后的代码映照回原始源代码。假如一个毛病来自于 sum.js，source map 就会明白的通知你。

我们来测试一下，在sum.js中输出一个毛病：

// ES Mudule 范例
export default function (a, b) {
  console.error('this is test') // 输出毛病
  return a + b
}

在没有devtool设置的情况下 npm run dev，会发明毛病提醒的行数并不准确，

原因是我们的代码是被编译过的

然后在webpack.config.js中到场设置：

  devtool: 'inline-source-map', // 到场devtool设置

当设置文件修正时须要从新实行 npm run dev：

毛病提醒行数以及源码映照都是准确的。devtool的取值有许多，人人可根据须要自行设置

1.3 模块热替代

模块热替代(Hot Module Replacement)是 webpack 供应的最有效的功用之一。它许可在运行时更新种种模块，而无需举行完整革新。

运用异常简朴，在webpack.config.js中引入webpack:

  const webpack = require('webpack')

在plugins数组中增加：

  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()

给devServer中的hot属性设为true：

devServer: {
    port: 8080,  // 端口号
    host: '0.0.0.0', // 主机名，设为该值可经由过程IP接见
    overlay: {
      errors: true // 毛病提醒
    },
    hot: true
  }

如许我们修正代码的时刻就可以部分革新模块而不是革新全部页面了。

2.构建临盆环境

开辟环境(development)和临盆环境(production)的构建目的差别很大。在开辟环境中，我们须要具有壮大的、具有及时从新加载(live reloading)或热模块替代(hot module replacement)才能的 source map 和 localhost server。而在临盆环境中，我们的目的则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资本，以改良加载时候。因为要遵照逻辑星散，我们一般发起为每一个环境编写相互自力的 webpack 设置。

虽然，以上我们将临盆环境和开辟环境做了稍微辨别，然则，请注意，我们照样会遵照不反复准绳(Don’t repeat yourself – DRY)，保存一个“通用”设置。为了将这些设置兼并在一起，我们将运用一个名为 webpack-merge 的东西。经由过程“通用”设置，我们没必要在环境特定的设置中反复代码。

我们先从装置 webpack-merge 最先，用来兼并webpack设置项：

npm install --save-dev webpack-merge

在config文件夹下建立 webpack.dev.js 和 webpack.build.js 并修正 webpack.config.js，将开辟与临盆环境的大众设置放在webpack.config.js中：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  entry: {
    main: path.join(__dirname, '../src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderOptions(isDev)
      },
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'less-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[path][name]-[hash:5].[ext]',
              limit: 1024
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../index.html'),
      inject: true,
      minify: {
        removeComments: true
      }
    })
  ]
}

module.exports = config

webpack.dev.js

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    overlay: {
      errors: true
    },
    historyApiFallback: {
      index: '/index.html'
    }
  }
})

webpack.build.js

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const common = require('./webpack.config.js')

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    splitChunks: {
      chunks: 'initial',
      automaticNameDelimiter: '.',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2,
          priority: 3
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new CleanWebpackPlugin(
      ['dist'],
      {
        root: path.join(__dirname, '../')
      }
    )
  ]
})

修正package.json的敕令：

"dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.build.js --progress --inline --colors"

如今离别实行 npm run dev 和 npm run build 就会获得你想要的了。