Webpack.config.js

varWebpack = require ('Webpack'); Module.exports= {    //plug-in itemsplugins: [NewWebpack.optimize.CommonsChunkPlugin ('Common.js'),        NewWebpack.optimize.UglifyJsPlugin (),NewWebpack.optimize.DedupePlugin (),NewWebpack.optimize.OccurrenceOrderPlugin ()],//Page Portal File configurationEntry: {index:'./src/js/page/index.js' },   //ingress file Output configurationoutput: {path:'Dist/js/page', FileName:'[Name].js'}, module: {//Loader ConfigurationLoaders: [{test:/\.css$/, Loader:'Style-loader!css-loader'}, {test:/\.js$/, Loader:'Jsx-loader?harmony', loader: ' Babel-loader?presets[]=es2015&presets[]=react '}, {test:/\.scss$/, Loader:'Style!css!sass?sourcemap'}, {test:/\. (png|jpg) $/, loader:'url-loader?limit=8192'}      ]   },   //Other Solution ConfigurationsResolve: {root:'e:/github/flux-example/src',      //Absolute PathExtensions: ["','. js','. JSON','. Scss'], alias: {appstore:'Js/stores/appstores.js', ActionType:'Js/actions/actiontype.js', Appaction:'Js/actions/appaction.js'             }    }}

⑴plugins is a plug-in item, and here we use a commonschunkplugin plug-in that extracts the public script portion of multiple portal files and then generates a common.js to facilitate reuse across multiple pages.

⑵entry is the page portal file configuration, output is the corresponding outputs of the configuration (that is, what the portal file will ultimately generate the name of the file, where to store), the syntax is roughly:

{entry: {page1:"./page1",        //supports array form, loads all modules in the array, but takes the last module as outputPage2: ["./entry1","./entry2"]}, Output: {path:"Dist/js/page", FileName:"[Name].bundle.js"    }}

The code eventually generates a page1.bundle.js and page2.bundle.js, and is stored under the./dist/js/page folder.

⑶module.loaders is the most critical piece of configuration. It tells Webpack that each type of file needs to be handled using the loader:

module: {//Loader ConfigurationLoaders: [//. css files use Style-loader and css-loader to handle{test:/\.css$/, Loader:'Style-loader!css-loader' },            //. js files use Jsx-loader to compile processing{test:/\.js$/, Loader:'Jsx-loader?harmony' },            //. scss files are compiled with Style-loader, Css-loader, and Sass-loader{test:/\.scss$/, Loader:'Style!css!sass?sourcemap'},            //image files are processed using Url-loader, which is less than 8KB direct to Base64{test:/\. (png|jpg) $/, loader:'url-loader?limit=8192'}        ]    }

As above, "-loader" is actually can omit not to write, multiple loader between "!" To connect them.

Note that all loaders need to be loaded via NPM, and it is recommended to check their corresponding readme to see how they are used.

For the last Url-loader, it will convert the image referenced in the style to a module to be processed, and the loader needs to be installed first:

NPM Install Url-loader-save-dev

The parameters for configuration information "? limit=8192" means that all images less than 8kb are converted to Base64 form (in fact, it should be said that more than 8kb to use Url-loader to map to the file, otherwise to the data URL form).

⑷ finally is the resolve configuration, this piece is very well understood, directly writes the comment:

Resolve: {//Find the module and start looking for it here.Root'e:/github/flux-example/src',//Absolute Path//automatic extension of the file suffix means that we can omit the suffix name from the Require moduleExtensions: ["','. js','. JSON','. Scss'],        //module alias definition, easy to follow the direct reference alias, no need to write long addressalias: {appstore:'Js/stores/appstores.js',//subsequent direct require (' AppStore ') can beActionType:'Js/actions/actiontype.js', Appaction:'Js/actions/appaction.js'        }    }

Run Webpack:

The execution of the Webpack is also simple, directly executed

$ webpack--display-error-details

, the following parameter "--display-error-details" is recommended, to facilitate error when you can consult more detailed information (such as the process of webpack looking for modules), so as to better locate the problem.

The other main parameters are:

$ webpack--config xxx.js   // use another profile (such as webpack.config2.js) to package  --watch   //  monitoring changes and automatically packaging  -P    // Compression Obfuscation script, this is very important! -d//Generate map Map file to tell which modules were eventually packaged      

The- p is a very important parameter, once an uncompressed 700kb file, compressed directly down to 180KB(mainly the style of this piece of the exclusive line of script, resulting in the uncompressed script becomes very large).

In Amd/cmd, we need to do shim processing of non-conforming modules (such as some plug-ins that return global variables directly), and we need to use Exports-loader to help:

{Test:require.resolve ("./src/js/tool/swipe.js"),  " Exports?swipe "}

Individually packaged style files

Sometimes you might want your project's style to be wrapped up in a script, rather than as a. css, and then introduced in the page as a <link> tag. At this time we need extract-text-webpack-plugin to help:

varWebpack = require ('Webpack'); varCommonsplugin =NewWebpack.optimize.CommonsChunkPlugin ('Common.js'); varExtracttextplugin = require ("Extract-text-webpack-plugin"); Module.exports={plugins: [Commonsplugin,NewExtracttextplugin ("[Name].css")], entry: {//... Omit other configurations

Webpack.config.js