Webpack-dev-server Lightweight JS high-speed packaging, hot deployment server

Webpack is a packaged Web project tool that can implement css,js,less,cass,html encryption, Minify, combined with webpack-dev-server hot deployment, very convenient for front-end page and Nodejs development.

Webpack

Installation method

NPM Install Webpack--save-dev

NPM Install Webpack-dev-server--save-dev

Executing webpack requires a configuration file Webpack.config.js in the project directory.

varWebpack = require (' Webpack ')); Module.exports={entry:{index:'./src/index.js ', Vendor: [' React ',          ' React-dom ',          ' React-redux ']}, output:{path:'./bin ', FileName:' App.bundle.js ', Publicpath:'/bin '}, module:{loaders:[{test:/\.js$/, exclude:/node_modules/, Loader:' Babel ', query: {presets: [' es2015 ', ' stage-0 ', ' react ']}}]}, plugins: [NewWebpack.optimize.CommonsChunkPlugin (/*chunkname=*/"Vendor",/*filename=*/"Vendor.bundle.js")    ]}

The above entry represents the entry file, and Webpack automatically associates the other JS files referenced by this JS file. Can be set to an array that represents multiple portals.

The location in which you write your own code is specified in output with a relative path./bin/app.bundle.js.

Vendor points out the use of the third-party JS,

Easy to plugins use Commonschunkplugin to separate the code you wrote from the third-party code, which vendor is specified in the plug-in constructor, and where to save it after processing.

The modules configuration in loaders is used to execute the sequence from right to left, similar to the pipeline in turn processing the test parameter matching to the JS file, CSS file.

Webpack Useful Parameters

-P or--optimize-minimize for de-space compression

-D generate Js.map file for easy source location

--hot deployment is enabled without refreshing the Web page

--watch observation file changes automatically re-webpack, start webpack-dev-server without using this parameter can also automatically trigger Webpack

Webpack-dev-server Lightweight JS high-speed packaging, hot deployment server