1 前言

第一篇webpack基礎(chǔ)教程：《最簡(jiǎn)單的webpack入門教程》

2 基礎(chǔ)配置

2.1 新建文件

在根目錄底下創(chuàng)建build文件夾，在底下新增三個(gè)文件：

• webpack.base.config.js 基礎(chǔ)配置
• webpack.dev.config.js 開(kāi)發(fā)打包配置
• webpack.prod.config.js 生產(chǎn)環(huán)境打包配置

創(chuàng)建文件

2.2 webpack.base.config.js

用來(lái)做webpack基礎(chǔ)配置，直接將原來(lái)webpack.config.js中的配置拿過(guò)來(lái)，需要注意的是原來(lái)的webpack.config.js文件在根目錄底下，webpack.base.config.js是在build文件夾底下，需要修改一下配置中的路徑：

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

module.exports = {
  mode: 'production',
  // 入口文件
  entry: path.resolve(__dirname, '../src/index.js'),
  // 輸出文件
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
      filename: 'index.html'
    })
  ],
  devServer: {
    // 端口
    port: 8090,
    // 靜態(tài)資源目錄
    static: path.resolve(__dirname, '../dist')
  }
}

3 配置合并

3.1 安裝插件

先安裝webpack配置合并插件webpack-merge：

npm install webpack-merge --save-dev

3.2 webpack.dev.config.js

引入公共配置webpack.base.config.js：

const commonConfig = require('./webpack.base.config')

編寫開(kāi)發(fā)環(huán)境需要的配置，比如把mode設(shè)置為development：

const devConfig = {
  mode: 'development'
}

然后使用插件webpack-merge的merge方法合并公共配置和開(kāi)發(fā)特有配置并導(dǎo)出配置：

module.exports = merge(commonConfig, devConfig)

全部代碼如下：

const commonConfig = require('./webpack.base.config')
const { merge } = require('webpack-merge')

const devConfig = {
  mode: 'development'
}

module.exports = merge(commonConfig, devConfig)

3.3 webpack.prod.config.js

相同的，編寫生產(chǎn)環(huán)境webpack配置：

const commonConfig = require('./webpack.base.config')
const { merge } = require('webpack-merge')

const prodConfig = {
  mode: 'production'
}

module.exports = merge(commonConfig, prodConfig)

4 查看效果

4.1 package.json

在package.json中的scripts底下新增兩個(gè)命令來(lái)調(diào)用我們的兩個(gè)配置：

"build:dev": "webpack --config ./build/webpack.dev.config.js",
"build:prod": "webpack --config ./build/webpack.prod.config.js"

前面的dev和build命令就不改動(dòng)了：

package.json

注：現(xiàn)在build和build:prod雖然分別使用的是根目錄底下的webpack.config.js配置和build文件夾底下的webpack.prod.config.js配置，但是目前兩個(gè)配置一樣所以其實(shí)效果是相同的，所以也可以直接把build命令覆蓋掉：

"build": "webpack --config ./build/webpack.prod.config.js"

4.2 輸入命令

在命令行中輸入：

npm run build:dev

打出來(lái)的包是沒(méi)有壓縮的，bundle.js文件：

bundle.js

index.html也是多行的：

index.html

使用另一個(gè)配置：

npm run build:prod

打出來(lái)的內(nèi)容不一樣了，bundle.js文件就一行了：

bundle.js

index.html也只有一行了：

index.html

5 源碼

和上一篇教程的源碼合一起了：

https://github.com/chrischen0405/webpack-demo