webpack学习之五,生产环境的搭建

这部分的学习可以不按照官网的开头(https://doc.webpack-china.org/guides/production/),可以搭建项目之后,按照如下文档,直接搭建生产环境

写在前面

生产环境的搭建是采用的复用配置文件的方式

1.需要使用的插件

npm install --save-dev webpack clean-webpack-plugin
 html-webpack-plugin uglifyjs-webpack-plugin
  webpack-dev-server webpack-merge

2.项目目录安排

webpack-production
    |- /src
        |-index.js
    |- index.html
    |- webpack.common.js
    |- webpack.dev.js
    |- webpack.prod.js
    |- package.json

3. 配置文件编写

(1)webpack.common.js

const path = require('path');
const CleaWebpackPlugin = require('clean-webpack-plugin');
const HtmlWepackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    plugins: [
        new CleaWebpackPlugin(['dist']),
        new HtmlWepackPlugin({
            title:"Production"
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

(2)webpack.dev.js

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

module.exports = merge(common,{
    devtool:'inline-source-map',
    devServer:{
        contentBase:'./dist'
    },
    plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV' : JSON.stringify('dev')
        })
    ]
});

(3)webpack.prod.js

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

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSWebpackPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            // 此变量在/src下的所有的文件都能关联到
            'process.env.NODE_ENV':JSON.stringify('production')
        })
    ]
});

(4)package.json

{
  "name": "webpack_production",
  "version": "1.0.0",
  "description": "生产环境的搭建",
  "main": "index.js",
  "scripts": {
      // json文件中不认识双斜杠注释
      // start是开发环境
    "start":"webpack-dev-server --open --config webpack.dev.js",
    // build是生产环境
    "build":"webpack --config ./webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.5"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.18",
    "html-webpack-plugin": "^2.30.1",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-merge": "^4.1.1"
  }
}

(5)src/index.js

import _ from 'lodash';

// process.env.NODE_ENV 变量可以被src下的js引用,此处可以做一些开发中才使用的代码,但是需要在webpack.dev.js和webpack.prod.js中定义
if(process.env.NODE_ENV !== 'production'){
    console.log('这不是生产环境');
}
if(process.env.NODE_ENV === 'dev'){
    console.log('这是开发环境');
}

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['你好','申玉超'],'');
    return element;
}

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

(5)此时可以实验npm start 和npm run build的区别