More Bo can't forget--webpack study notes

Webpack is the front-end building system like grunt and gulp (before learning grunt so also probably understand what the webpack is a thing), so that most of the front-end technology is really connected, and now feel that more than a look at the things are not wasted, although long time will not forget a lost, But I still have an impression in my mind.

Webpack can be used as a module to load and package similar browserify, and can do more. Similar to the Appeal Module management tool will have a corresponding configuration file for the description of your packaged files, packaging modules and so on.

Webpack Common commands:

Webpack-p Compression Obfuscation Script

Webpack--watch monitoring Change automatic packaging

Webpack-d generate a map map file to tell which files are packaged where

Webpack-dev-server sends a message about the state of the compilation to the client, and the client responds to the message

Learn the notes according to Ruan's big demo record as follows:

Demo01

Module.exports = {  './main.js ',  output: {
Path: './js/',    ' bundle.js '  };

Entry: (1) String: Define the entry file

(2) Array: also contains the portal file, you can configure the static resource server

Output: An object that defines the outputs of a file, containing two parameters for the path and file name.

Demo02

Module.exports = {  entry: {    './main1.js ',    './main2.js '  },  Output: {    ' [name].js '}  };

When the entry file in entry is relatively long, the filename in output can be written as above to define the names of different files.

Demo03

Module.exports = {  './index.js ',  output: {    ' bundle.js '  },  module: {    loaders:[      /\.css$/, loader: ' Style-loader!css-loader ' },      /\.js[x]?$/, exclude:/node_ modules/, loader: ' Babel-loader?presets[]=es2015&presets[]=react ' },    ]  }};

Module: Defines the processing logic for the modules,

Loaders: A series of loaders is defined, and the loader converter-webpack itself only handles native JavaScript modules, but the loader converter can convert various types of resources into JavaScript modules. [See here, my expression is to want to be Papi sauce, every time thumbs up the expression like, stick ~]

Test: Define different loaders for different files through some regular rules

demo04

  module: {    loaders:[      /\.css$/, loader: ' Style-loader!css-loader ' },    ]  };

Introducing a CSS file requires two loaders, between the two loaders! Connection.

Demo05

module: {    loaders:[      /\. ( png|jpg) $/, loader: ' url-loader?limit=8192 '}    ]  }

Url-loader is a picture loader that automatically handles Base64 encoding when the picture is less than 8192b. The parameters used to mark the incoming loader.

Demo06

module: {    loaders:[      /\.js[x]?$/, exclude:/node_modules/, loader: ' babel-loader?presets[]=es2015 &presets[]=react ' },      /\.css$/, loader: ' Style-loader!css-loader?modules ' }    ]  }

Pass? Parameter description, the CSS file style default is given to the tag in the module, unless a special description, as follows:

: Global (. h2) {  color:blue;}

Demo07

var webpack = require (' Webpack '); var uglifyjsplugin == {  './main.js ',  output: {    ' bundle.js '   },  plugins: [    new  uglifyjsplugin ({      compress: {        false       }    })  ]}

Plugins plug-ins make webpack can do more things, webpack itself built up some plug-ins, can also be installed through NPM third-party plug-ins, such as the uglifyjsplugin used to compress JS files.

"Hold more ... 】

More Bo can't forget--webpack study notes