生產環境和開發環境的配置目標不一樣，生產環境主要是讓檔案壓縮得更小，更優化資源，改善載入時間。
而開發環境，主要是要開發更方便，更節省時間，比如除錯比如自動重新整理。
所以可以分開配置不同的開發環境，然後需要哪種用哪種。

配置流程實踐記錄：

1. 新建專案資料夾 demo
   
2. 初始化 npm init
3. 安裝 webpack 和 webpack-cli

npm install --save-dev webpack webpack-cli

4.建立一個原始碼資料夾src,打包資料夾dist。並在src中建立一個index.hml模板檔案，和index.js入口檔案

5.安裝webpack-merge

npm install --save-dev webpack-merge

6.編寫公共配置檔案webpack.common.js,同時安裝需要用到的外掛

npm install --save-dev html-webpack-plugin   //用於html檔案模板跟蹤
npm install --save-dev clean-webpack-plugin  //用於清理dist資料夾

也可以一起下載

npm install --save-dev html-webpack-plugin clean-webpack-plugin
 

webpack.common.js

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

module.exports = {
    entry:{ 
        app: './src/index.js'
    },
    plugin:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production',
            filename:'index.html',
            template: './src/index.html',  //模板
            inject: 'body'
        })
    ]
    
}
 

7.開發環境配置webpack.dev.js

安裝webpack-dev-server

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

webpack.dev.js

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


module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer:{
        hot:true,   //開啟模組熱替換
        contentBase: './dist'    //告訴devServer在dist檔案找檔案
    },
    plugins:[
        new webpack.NamedModulesPlugin(), 
        new webpack.HotModuleReplacementPlugin()  //開啟模組熱替換
    ],
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    }
});

8.配置生產環境webpack.prod.js

npm install --save-dev uglifyjs-webpack-plugin //用於刪除沒有用到的程式碼，減少壓縮檔案體積

webpack.prod.js

const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
    plugins:[
        new UglifyJsPlugin({
            sourceMap: true
        })
    ],
    output:{
        //生產環境加入hash值（版本號）
        filename:'[name]-[hash:5].bundle.js',
        path:path.resolve(__dirname,'dist')
    }
})

9.配置 package.json npm scripts 開發指令碼

package.json scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },

以上呢就配置得差不多了，剩下就是來編寫我們的內容指令碼

index.js

import { mulb } from './mach.js'

function component(){
    var element = document.createElement('pre');

    element.innerHTML = [
        'Hello 2019 ~',
        '12 mulb is :' + mulb(12)
    ].join('\n\n')

    return element;
}

if(process.env.NODE_ENV !== 'production'){
    console.log('我是開發環境');

    let element = component();
    document.body.appendChild(element);

    if(module.hot){
        module.hot.accept('./mach.js',function(){
            console.log('mulb change:')

            document.body.removeChild(element);
            element = component();
            document.body.appendChild(element);
        })
    }

}else{
    console.log('我是生產環境');
    document.body.appendChild(component());
}

mach.js

export function mula(x){
    return x * x;
};

export function mulb(x){
    return x * x * x;
};