Webpack 2 react development and configuration instance code, webpackreact

Webpack 2 react development and configuration instance code, webpackreact

Based on the standard syntax of webpack 2.3, common configurations such as less variable replacement, hot loading of React components, separate output of the third library, and distinguishing production and development environments are provided.

'Use strict 'module. exports = function (env) {// use the-p parameter to enable code compression for webpack in the Generation Environment // use the -- env dev parameter to specify the compiling environment var isDev = env = 'dev' for webpack [-dev-server'; var path = require ('path'); var webpack = require ('webpackage'); var CleanWebpackPlugin = require ('clean-webpack-plugin '); var CopyWebpackPlugin = require ('Copy-webpack-plugin'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); var WebkitPrefi Xer = require ('autoprefixer'); var WebpackMd5Hash = require ('webpack-md5-hash '); var BundleAnalyzerPlugin = require ('webpack-bundle-analyzer '). bundleAnalyzerPlugin; var sourcedir = path. resolve (_ dirname, 'src'); // place the source code and resource file var outputdir = path. resolve (_ dirname, 'built'); // place the compilation result var webContextRoot = '/myreact/'; // actual application access path, the default value is the actual access path of the '/' // antd icon font file. Use the less-load variable replacement function var Td_fonticon = webContextRoot + 'Assets/antd_fonticon/iconfont '; var hasValue = function (item) {return item! = Null;}; return {// context: path. resolve (_ dirname), devtool: 'source-map', devServer: {host: '0. 0.0.0 ', port: 8082, historyApiFallback: true}, resolve: {// Let the less-loader and Other plug-ins find ~ Relatively positioned resource modules: [sourcedir, 'node _ module']}, entry: {main: [// compile the new api of the new js version (such as Promise ), it mainly enables IE11 to execute the compiled code 'babel-polyfill', // use react-hot-loader@3.0.0-beta.6, // With webpack-dev-server -- hot command to implement hot reload isDev of react components? 'React-hot-loader/patch ': null, path. resolve (sourcedir, 'main. jsx ')]. filter (hasValue), // third-party library summarizes and outputs the vendor: ['bootstrap/dist/css/bootstrap.min.css ', 'react', 'react-dom ', 'react-router ', 'redux ', 'react-redux', 'react-router-redux ', 'moment', 'lodash', 'immutable', 'whatwg-fetch ', // only the js part 'antd 'containing antd, // each control also needs to introduce its own style file 'antd/lib/style/index. less ']}, output: {path: outputdir, filename: isDe V? 'Js/[name]. js': 'js/[name] _ [chunkhash: 8]. js', // use require. the code file chunkFilename: isDev? 'Js/chunk _ [id] _ [name]. js': 'js/chunk _ [name] _ [chunkhash: 8]. js', publicPath: webContextRoot}, module: {rules: [{test :/\. jsx? $/, Exclude:/(node_modules | bower_components)/, use: [{// compile the js syntax of the new version as the lower version. js syntax loader: 'babel-loader ', options: {presets: [// compile es2015 js ['babel-preset-es2015 ', {modules: false}], 'babel-preset-stage-2 ', // compile jsx 'babel-preset-react '], plugins: [// support hot loading of react component isDev? 'React-hot-loader/babel ': null, // reduces the number of repeated compilation methods. 'babel-plugin-transform-runtime ', // load the code and style of the component as needed ['babel-plugin-import', {libraryName: 'antd ', style: true}]. filter (hasValue) }}, {test :/\. css $/, use: ['style-loader ', {loader: 'css-loader', options: {// third-party components do not introduce css in module mode, therefore, you cannot enable css module modules: false }}, {loader: 'postcss-loader ', options: {plugins: [WebkitPrefixer]} globally., {Test :/\. less $/, use: ['style-loader ', {loader: 'css-loader', options: {modules: false }}, {loader: 'postcss-loader ', options: {plugins: [WebkitPrefixer] },{ loader: 'Less-loader', options: {modules: false, modifyVars: {// Replace the font file path "icon-url" used by antd: JSON. stringify (antd_fonticon) }}]}, {test :/\. (jpg | png | gif) $/, use: {loader: 'url-loader ', options: {// The maximum size limit encoded as dataUrl: 10000, // output path, relative to publicPath outputPath: 'Assets/', name: isDev? '[Name]. [ext] ':' [name] _ [hash: 8]. [ext] '}}, {test :/\. (woff | woff2 )(\? V = \ d + \. \ d + \. \ d + )? $/, Use: {loader: 'url-loader ', options: {limit: 10000, mimetype: 'application/font-woff', outputPath: 'Assets/', name: isDev? '[Name]. [ext]': '[name] _ [hash: 8]. [ext]' }}, {test:/\. ttf (\? V = \ d + \. \ d + \. \ d + )? $/, Use: {loader: 'url-loader ', options: {limit: 10000, mimetype: 'application/octet-stream', outputPath: 'Assets/', name: isDev? '[Name]. [ext]': '[name] _ [hash: 8]. [ext]' }}, {test:/\. eot (\? V = \ d + \. \ d + \. \ d + )? $/, Use: {loader: 'url-loader ', options: {limit: 10000, mimetype: 'application/vnd. ms-fontobject ', outputPath: 'Assets/', name: isDev? '[Name]. [ext]': '[name] _ [hash: 8]. [ext]' }}, {test:/\. svg (\? V = \ d + \. \ d + \. \ d + )? $/, Use: {loader: 'url-loader ', options: {limit: 10000, mimetype: 'application/svg + xml', outputPath: 'Assets/', name: isDev? '[Name]. [ext] ':' [name] _ [hash: 8]. [ext] '}}]}, plugins: [// momentjs contains a large number of localized code and needs to filter new webpack. contextReplacementPlugin (/moment [\// \] locale $/,/en-ca | zh-cn/), new webpack. optimize. occurrenceOrderPlugin (true), // copy the file that does not need to be compiled to the output directory new copywebpackpackin ([{from: path. resolve (sourcedir, 'assets'), to: 'assets'}]), // fixed the problem that the chunkhash of webpack is not subject to the actual content of the chunk file. new WebpackMd5Hash (), // independently package and output third-party components, And the runtime Code new webpack generated by webpack. optimize. commonsChunkPlugin ({name: ['vendor', 'manifest ']}), // automatically fills in js and css references to the homepage new HtmlWebpackPlugin ({title: 'wzp react', template: path. resolve (sourcedir, 'index.html '), inject: 'body' // Inject all scripts into the body}), // set the environment variable new webpack. definePlugin ({process: {env: {// process. env. NODE_ENV = "production" // In the application code, you can determine whether it is running in the production environment NODE_ENV: isDev? JSON. stringify ('development'): JSON. stringify ('production ') }}), // print more readable module names on HMR updates isDev? New webpack. NamedModulesPlugin (): null, // clear the output directory isDev first? Null: new CleanWebpackPlugin ([outputdir]), // exclude specific library isDev? Null: new webpack. IgnorePlugin (/. */,/react-hot-loader $/), // output report, view the size of the third-party library isDev? Null: new BundleAnalyzerPlugin ({analyzerMode: 'state', reportFilename: 'report.html ', openAnalyzer: true, generateStatsFile: false})]. filter (hasValue )}};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.