Construction of react project based on Webpack (III.)

Objective

Building the development environment of the former, can be developed. However, in the actual project, different environments have different construction needs. Here, the configuration of the development environment and production environment is extracted separately, and some simple optimizations are made.

• Separate public configurations for different environments

Although different environments have different construction needs, but still have the same part, here will be part of the extraction, separate configuration, and other environments to merge common configuration can be. Install Webpack-merge(for merge configuration),uglifyjs-webpack-plugin(JS code compression, separately extracted control version here) and Rimraf(cross-platform removal tool )。

NPM Install Webpack-merge uglifyjs-webpack-pulgin Rimraf--save-dev

Next configure the common configuration webpack.config.js.

Const PATH = require (' path '); Const Webpack= Require (' Webpack '); Module.exports={entry: [' Babel-polyfill ', Path.resolve (__dirname, ' ... /src/index.js ')],//Specify the portal file, where the program starts compiling, __dirname the current directory, ... /indicates the previous level of the directory,./Sibling Directoryoutput: {path:path.resolve (__dirname,‘.. /dist '),//path to OutputFileName: ' App/[name]_[hash:8].js ',//post-packaged files  },module: {rules: [{enforce:' Pre ', test:/\. (JS|JSX) $/, Loader:' Eslint-loader ', exclude:/node_modules/,}, {test:/\. (JS|JSX) $/, Loader:' Babel-loader ',//Loading DeviceExclude:/node_modules/,}, {test:/\.css$/, use: [{loader:' Style-loader ',}, {loader:' Css-loader ',},],}, {test:/\.less$/, use: [{loader:' Style-loader ',}, {loader:' Css-loader ',}, {loader:' Less-loader ', Options: {sourcemap:true,          },        }],      },    ],  },};

Configure the development environment Webpack.dev.config.js.

Const PATH = require (' path '); Const Htmlwebpackplugin= Require (' Html-webpack-plugin '); Const Webpack= Require (' Webpack '); const merge= Require (' Webpack-merge '); Const Webpackconfig= require ('./webpack.config '));p Rocess.env.NODE_ENV= ' development '; Module.exports=Merge (Webpackconfig, {devtool:' Cheap-module-eval-source-map ', entry: [' Babel-polyfill ',    ' React-hot-loader/patch ',    ' webpack-dev-server/client?http://localhost:9090 ',    ' Webpack/hot/only-dev-server ', Path.resolve (__dirname,‘.. /src/index.js '),  ],plugins: [NewWebpack. Hotmodulereplacementplugin (),NewWebpack. Defineplugin ({' Process.env.NODE_ENV ': json.stringify (Process.env.NODE_ENV | | ' Development '),    }),    NewHtmlwebpackplugin ({template:path.resolve (__dirname,‘.. /src/index.template.html '), inject:true,    }),    NewWebpack. Noemitonerrorsplugin (),],});

Because the production environment does not require a hot update, the entry file differs from the previous index.js. Here is the new index.prod.js in the SRC directory, edited as follows.

/* eslint-disable */  ' react' react-dom ';
'./app '= Component = {    render (          <component/>,        document.getElementById (' App ')    ;}; Renderdom (APP);

Configure the production environment webpack.prod.config.js.

Const PATH = require (' path ');
Const Htmlwebpackplugin = require (' Html-webpack-plugin ');
Const WEBPACK = require (' Webpack ');
Const MERGE = require (' Webpack-merge ');
Const Uglifyjsplugin = require (' Uglifyjs-webpack-plugin ');
Const WEBPACKCONFIG = require ('./webpack.config ');

Process.env.NODE_ENV = ' production ';

Module.exports = Merge (Webpackconfig, {
Entry: [
' Babel-polyfill ',
Path.resolve (__dirname, ' ... /src/index.prod.js '),
],
Plugins: [
New Uglifyjsplugin ({
Uglifyoptions: {
Output: {
Comments:false,
Beautify:false,
},
},
}),
New Webpack. Defineplugin ({
' Process.env.NODE_ENV ': json.stringify (Process.env.NODE_ENV | | ' Production '),
}),
New Htmlwebpackplugin ({
Template:path.resolve (__dirname, ' ... /src/index.template.html '),
Inject:true,
Minify: {
Html5:true,
Collapsewhitespace:true,
Removecomments:true,
Removetagwhitespace:true,
Removeemptyattributes:true,
Removestylelinktypeattributes:true,
},
}),
],
});

Configure Package.json to create a new three execution script.

"Scripts": {    "dev": "Node Bin/dev-server",   "Build": "NPM Run clean && webpack-- Config webpack/webpack.prod.config.js ",    " Devbuild ":" NPM run clean && webpack--config webpack/ Webpack.dev.config.js ",    " clean ":" Rimraf Dist "  }

# Start Development Debug NPM Run dev# development environment build NPM run devbuild# production environment build NPM run Build

• Simple packaging optimization

When we build, we often want to separate our code from the third-party library and modify the Webpack.config.js.

......
Entry: {    app: [' Babel-polyfill ', Path.resolve (__dirname, '. /src/index.js ')],    vendor: [' react ', ' react-dom ', ' Babel-polyfill '],  },//Specify third-party library directory, reduce webpack look-up time    modules: [Path.resolve (__dirname, '. /node_modules ')],  },
......
 plugins: [    new Webpack.optimize.CommonsChunkPlugin ({      name: ' Vendor '),      Minchunks:infinity,    }),  ],
......

Construction of react project based on Webpack (III.)