摘要：如使用插件為我們自動(dòng)生成一個(gè)文件。安裝使用生產(chǎn)和開發(fā)構(gòu)建分離生產(chǎn)和開發(fā)中的構(gòu)建肯定是不同，生產(chǎn)中側(cè)重于一個(gè)更好的開發(fā)體驗(yàn)，而生產(chǎn)環(huán)境中則需要更多的性能優(yōu)化，更小的。可以指定命令運(yùn)行以來(lái)的配置文件，通過(guò)在中寫入是一種不錯(cuò)的方式。

原文地址：https://github.com/huruji/blog/issues/3

單文件入口
指定entry鍵值

const config = {
  entry: "./yourpath/file.js"
};
module.exports = config

上面的是以下的簡(jiǎn)寫：

const config = {
  entry: {
    main: "./yourpath/file.js"
  }
};
module.exports = config

多文件入口
對(duì)entry采用對(duì)象寫法，指定對(duì)應(yīng)的鍵值對(duì)，為了輸出這多個(gè)文件可以使用占位符

const path = require("path");
const config = {
  entry: {
    app1: "./src/main.js",
    app2: "./src/app.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "dist")
  }
};

module.exports = config;

指定打包構(gòu)建之后輸出的文件
單文件輸出
指定output鍵值，值為對(duì)象，對(duì)象中指定path和filename

const path = require("path");
const config = {
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  }
};

module.exports = config;

多文件輸出
使用占位符，輸出文件將按照多文件入口指定的鍵來(lái)替代占位符

const path = require("path");
const config = {
  entry: {
    app1: "./src/main.js",
    app2: "./src/app.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "dist")
  }
};

module.exports = config;

Loader可以在加載模塊時(shí)預(yù)處理文件，類似于gulp中的task。配置loader需要在module選項(xiàng)下指定對(duì)應(yīng)后綴名相應(yīng)的rules，使用test正則指定后綴名，使用use指定相應(yīng)的loader

允許在js中import css
需要使用style-loader和css-loader，首先需要安裝：

npm i css-loader style-loader --save-dev

使用loader

const path = require("path");

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /.css$/,
      use: [
        "style-loader",
        "css-loader"
      ]
    }]
  }
};

module.exports = config;

模塊文件寫法：

import "./css/main.css"

允許加載圖片
需要使用file-loader,首先安裝：

npm i file-loader --save-dev

使用：

const path = require("path");

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /.(png|jpg|svg|gif)$/,
      use: [
        "file-loader"
      ]
    }]
  }
};

module.exports = config;

模塊文件寫法：

import logo from "./image/logo.svg";

插件的目的在于解決loader解決不了的事情，使用插件指定plugins選項(xiàng)即可，需要注意的使用插件需要引入插件。如使用HtmlWebpackPlugin插件為我們自動(dòng)生成一個(gè)html文件。

首先安裝：

npm i --save-dev html-webpack-plugin

配置webpack

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /.css$/,
      use: [
        "style-loader",
        "css-loader"
      ]
    },{
      test: /.(png|jpg|svg|gif)$/,
      use: [
        "file-loader"
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "我的webpack"
    })
  ]
};

module.exports = config;

源代碼被webpack打包之后，會(huì)很難追蹤到原始的代碼的位置，使用source map功能，可以將編譯后的代碼映射回原始代碼位置，指定devtool選項(xiàng)即可：

const config = {
  // ....
  devtool: "inline-source-map"
};

module.exports = config;

webpack-dev-server提供了一個(gè)簡(jiǎn)單的web服務(wù)器，并能夠?qū)崟r(shí)重新加載使用webpack需要先安裝：

npm i --save-dev webpack-dev-server

在配置文件中指定devServer選項(xiàng)，告訴服務(wù)器在哪里尋找文件

const config = {
  // ....
  devServer: {
    contentBase: "./dist"
  }
};

module.exports = config;

使用命令行運(yùn)行命令或者在package.json中指定scripts

webpack-dev-server --open

此時(shí)服務(wù)將運(yùn)行在8080端口，其中open選項(xiàng)表示服務(wù)開啟之后立即在默認(rèn)瀏覽器中打開頁(yè)面。

開啟熱更新很簡(jiǎn)單，只需要更新webpack-dev-server配置，增加hot選項(xiàng)，同時(shí)使用webpack自帶的HMR插件

const config = {
  // ....
  devServer: {
    contentBase: "./dist",
    hot:true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = config;

在實(shí)際中是開發(fā)中可能有些模塊的方法并沒(méi)有被使用，也就是說(shuō)，在開發(fā)中這些方法并沒(méi)有被import，這些沒(méi)有被使用的代碼應(yīng)該被刪除的，使用uglifyjs-webpack-plugin插件可以幫助我們刪除這些代碼，同時(shí)做代碼混淆和壓縮。
安裝：

npm i -D uglifyjf-webpack-plugin

使用：

const UglifyJSPlugin = require("uglifyjs-webpack-plugin")

const config = {
  // ....
  plugins: [
    new UglifyJSPlugin()
  ]
};

module.exports = config;

生產(chǎn)和開發(fā)中的構(gòu)建肯定是不同，生產(chǎn)中側(cè)重于一個(gè)更好的開發(fā)體驗(yàn)，而生產(chǎn)環(huán)境中則需要更多的性能優(yōu)化，更小的chunk。webpakck可以指定命令運(yùn)行以來(lái)的配置文件，通過(guò)在package.json中寫入script是一種不錯(cuò)的方式。而生產(chǎn)和開發(fā)中的配置肯定有很多重復(fù)的地方，使用webpack-merge可以合并通用配置
安裝：

npm i -D webpack-merge

webpack.common.js

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

const config = {
  entry: "./src/main.js",
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "My App"
    })
  ],
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
}

module.exports = config;

webpack.dev.js

const merge = require("webpack-merge");
const common = require("./webpack.common");

const config = merge(common, {
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist"
  }
});

module.exports = config;

webpack.prod.js

const merge = require("webpack-merge");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const common = require("./webpack.common");

const config = merge(common, {
  plugins: [
    new UglifyJSPlugin()
  ]
});

module.exports = config;

package.json

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

許多l(xiāng)ib通過(guò)與process.env.NODE_ENV環(huán)境關(guān)聯(lián)來(lái)決定lib中使用哪些內(nèi)容，使用webpack內(nèi)置的DefinePlugin可以為所有依賴指定這個(gè)變量。

const config = {
  // ......
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        "MODE_ENV": JSON.stringify("production")
      }
    })
  ]
  // ......
}

讓文件名帶有hash可以方便在生產(chǎn)環(huán)境中用戶及時(shí)更新緩存，讓文件名帶有hash可以使用和構(gòu)建相關(guān)的[hash]占位符，也可以使用與chunk相關(guān)的[chunkhash]占位符，通常后一種是更好的選擇

const config = {
  //......
  output: {
    filename: [name].[chunkhash].js,
    path: path.join(__dirname, "dist")
  }
  // ......
}

在開發(fā)中有些時(shí)候我們需要webpack不打包某些lib，這在我們開發(fā)lib的時(shí)候特別常見，比如我們?yōu)閞eact開發(fā)插件，不希望打包的時(shí)候包含react。使用配置的external選項(xiàng)可以做到，

const config = {
  "externals": [
    "react",
    "react-dom"
  ]
}