為什么要用webpack-merge

• development(開(kāi)發(fā)環(huán)境) 和 production(生產(chǎn)環(huán)境) 這兩個(gè)環(huán)境下的構(gòu)建目標(biāo)存在著巨大差異 所以webpack的配置寫(xiě)的差距會(huì)非常的大
• 在開(kāi)發(fā)環(huán)境中，我們需要：強(qiáng)大的 source map 和一個(gè)有著 live reloading(實(shí)時(shí)重新加載) 或 hot module replacement(熱模塊替換) 能力的 localhost server。
• 而生產(chǎn)環(huán)境目標(biāo)則轉(zhuǎn)移至其他方面，關(guān)注點(diǎn)在于壓縮 bundle、更輕量的 source map、資源優(yōu)化等，通過(guò)這些優(yōu)化方式改善加載時(shí)間。由于要遵循邏輯分離，我們通常建議為每個(gè)環(huán)境編寫(xiě)彼此獨(dú)立的 webpack 配置。
• 雖然，以上我們將 生產(chǎn)環(huán)境 和 開(kāi)發(fā)環(huán)境 做了細(xì)微區(qū)分，但是，請(qǐng)注意，我們還是會(huì)遵循不重復(fù)寫(xiě)配置的原則，保留一個(gè) "common( 公共 )" 配置。為了將這些配置合并在一起，我們將使用一個(gè)名為 webpack-merge 的工具。此工具會(huì)引用 “common” 配置，因此我們不必再在環(huán)境特定env的配置中編寫(xiě)重復(fù)代碼。

安裝

npm install --save-dev webpack-merge

目錄結(jié)構(gòu)

 webpack-demo
  |- package.json
  |- package-lock.json
 - |- webpack.config.js // 刪除全局webpack配置
 + |- webpack.common.js // 新建公共配置
 + |- webpack.dev.js	// 新建開(kāi)發(fā)環(huán)境配置
 + |- webpack.prod.js	// 新建生產(chǎn)環(huán)境配置
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js 公共配置

const path = require('path');
// 該插件將為你生成一個(gè) HTML5 文件， 
// 在 body 中使用 script 標(biāo)簽引入你所有 webpack 生成的 bundle。
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

webpack.dev.js 開(kāi)發(fā)環(huán)境配置

// 引入webpack-merge
const { merge } = require('webpack-merge');
// 引入公共配置
 const common = require('./webpack.common.js');
// 第一個(gè)參數(shù)是公共配置 第二個(gè)參數(shù)是環(huán)境里的配置
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

webpack.prod.js 生產(chǎn)環(huán)境配置

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

 module.exports = merge(common, {
   mode: 'production',
 });

• 現(xiàn)在，在 webpack.common.js 中，我們?cè)O(shè)置了 entry 和 output 配置，并且在其中引入這兩個(gè)環(huán)境公用的全部插件。
• 在 webpack.dev.js 中，我們將 mode 設(shè)置為 development，并且為此環(huán)境添加了推薦的 devtool（強(qiáng)大的 source map）和 devServer 配置。
• 最后，在 webpack.prod.js 中，我們將 mode 設(shè)置為 production，

注意，在環(huán)境特定的配置中使用 merge() 功能，可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各種 merge(合并) 高級(jí)功能，但是在我們的用例中，無(wú)需用到這些功能。

到此這篇關(guān)于webpack-merge的使用的文章就介紹到這了,更多相關(guān)webpack-merge的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論