【webpack学习笔记】a06-生产环境和开发环境配置

生产环境和开发环境的配置目标不一样，生产环境主要是让文件压缩得更小，更优化资源，改善加载时间。
而开发环境，主要是要开发更方便，更节省时间，比如调试比如自动刷新。
所以可以分开配置不同的开发环境，然后需要哪种用哪种。

---

配置流程实践记录：

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用于分离配置，并建立三个配置文件，一个公用（webpack.common.js）一个用于生产环境（webpack.prod.js）一个生产环境(webpack.dev.js)

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('

')

    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;
};