Webpack installation Configuration

-gnpm Install Webpack-dev-server-g

 webpack configuration file  var  path = require ( " path  " ); 
 Module.exports = {
  entry : Path.resolve (__dirname,  "" Span style= "COLOR: #800000" >app/app.js   "), 
  output : {Path:path.resolve (__dirname,  '  build  " Span style= "COLOR: #800000", "", FileName:  " bundle.js   "} 
} 

Configure Package.json " Scripts " : {  "start""webpack-dev-server"   "build""webpack " }npm run Build equals Webpack, NPM Run start is equivalent to Webpack-dev-server.

Installation of various loader

such as Babel:
NPM Install Babel-core babel-loader babel-preset-es2015 babel-preset-react--save-dev

 webpack Configuration Loader 
 module.exports = {... module: {loaders: [{test:  /\.jsx?$/  exclude  : / Node_modules/  " babel  "    query  : {presets: [ "  es2015   ", "  react   " .. . 
 //"-loader" is actually can be omitted to write, multiple loader with "!" To connect them.  
  

{test:/\.css$/, loader: ' Style-loader!css-loader? modules!postcss'},

　　　　Install Postcss-loader and autoprefixer (plugins that automatically add prefixes): NPM install--save-dev postcss-loader autoprefixer.
{test:/\.js$/, Loader: ' Jsx-loader?harmony '},
{test:/\.scss$/, Loader: ' Style!css!sass?sourcemap '},
{test:/\. (png|jpg) $/, loader: ' url-loader?limit=8192 '},

　　　　Image files are processed using Url-loader, which is less than 8kb direct to Base64

　　　　{test: /\.less$/, exclude: /^node_modules$/, loader: extracttextplugin.extract(' style ', [' CSS ', 'autoprefixer', ' less '])}

] 　},
　Postcss
Require ('autoprefixer
],

... };

Loaders: [{ test: A regular expression that matches the extension name of the file processed by loaders (must) loader: Loader name (required) include/  exclude: Manually add files (folders) that must be processed (folder) or block files (folders) that you do not need to process (optional) query: Provide additional setup options for loaders (optional)}]

Install Postcss-loader and autoprefixer (automatically add a prefix plugin):

NPM Install--save-dev Postcss-loader autoprefixer.

Devserver

devserver: {          "./public"// The directory          where the page loaded by the local server is located true // The output in the terminal is  color        true // do not  jump        true // Real-  time refresh    }  

Plugins

Hot Module Replacement: It allows you to automatically refresh the modified effect of the live preview after the component code has been modified. ① Add the HMR plugin in the webpack configuration file; plugins:                  [new webpack. Hotmodulereplacementplugin ()/// hot load  plug- in         ],  ② Add "warm" parameter to Webpack Dev server
devserver:{
Historyapifallback:true,
　　Hot:true,
Inline:true,
progress:true,//error is not recognized, after deletion can also be refreshed normally
},

Htmlwebpackplugin: According to a simple index.htmlTemplate, generate a new one that automatically references your packaged JS file index.html。 This is useful at each time the JS file name is generated (such as adding a hashValue

NPM Install--save-dev html-webpack-Plugin Remove the build folder, using this plug-in, index.html files will be automatically generated, in addition to the CSS has been packaged in the previous Operation JS. In the app directory, create a index.tmpl.html file template that contains the required elements of the title,
During the compilation process, the plugin will generate the final HTML page based on this template, and will automatically add the dependent CSS, Js,favicon and other files <! DOCTYPE html>"utf-8">    <title>webpack Sample project</title>  ' app '>    </div>  </body>
Webpack commands that are commonly used
// use a different configuration file (such as webpack.config2.js) to package  // Monitor changes and automatically package  -P// compression Obfuscation scripts, this is very important! -D// generate map Map file to tell which modules are finally packaged where.  -P is an important parameter, once an uncompressed 700kb file, compressed and dropped directly into  180KB (mainly style this block is a single line of script, causing the uncompressed script to become large)
Webpack installation Configuration