webpack--Self-study notes

Original--http://webpack.github.io/docs/tutorials/getting-started/

What is Webpack?

Webpack is a module wrapper. Webpack Packages the module (s) together with its dependencies to generate static resources that contain these modules.

1. How to turn Webpack

You first need to install node. js and enter it at the command line:

$ NPM Install Webpack-g

2. How to use Webpack

1. Start with an empty folder, first create: Entry.js, and then enter:

document.write ("It works.");

Then add an HTML file:

After that, run on the command line:
$ webpack./entry.js bundle.js
It compiles the file and creates a package. After the command runs successfully, it displays:
Version:webpack 1.13.3time:24ms    Asset     Size  Chunks             Chunk namesbundle.js  1.42 KB       0  [emitted]  mainchunk    {0} bundle.js (main) bytes [rendered]    [0]. /tutorials/getting-started/setup-compilation/entry.js bytes {0} [built]
When you open index.html in your browser, you will see "It works."
2. Create a second file Content.js, add content:
Module.exports = "It works from Content.js.";
Update Entry.js
-document.write ("It works.") ); + document.write (Require ("./content.js"));
Recompile:
$ webpack./entry.js bundle.js
After you refresh your browser, you'll see "It works from Content.js."
Webpack will parse the interface file depending on other files. these files (called modules) are included in the bundle.js. 
　　Webpack will give each module a unique ID and save all modules access to the Bundle.js ID file. only input modules are executed at startup. a small runtime provides the required functions and the dependencies that are executed when needed. 
  3. Add a CSS file      
   Webpack can only handle JavaScript itself, so we need to Css-loader process CSS files.  We also need to apply styles to the Style-loader CSS file. 
  run NPM install css-loader style-loader Install loader.  (they need to be installed locally without-g), which will create a node_ for you Modules folder, the loader will run. 
Create a CSS file, style.css
body {    Background:yellow;}
Then update entry.js:
+ Require ("!style!css!. /style.css ");  document.write (Require ("./content.js"));
With the prefix "!style!css!", a series of conversions can be made to the file, which eventually becomes a module of JavaScript.
command-line Binding loaders
If we don't want to write a long require: require ("!style!css!. /style.css "), simplified to require ("./style.css ")
Or we like the flexibility to customize the way CSS files are converted.
Modify Entry.js
// require ("!style!css!. /style.css "); Require ("./style.css");d ocument.write (Require ("./content.js"));
Execute the following command:
1 $ webpack./entry.js bundle.js--module-bind "Css=style\!css"
The official website explains there is a mistake in this, there is a backslash css=style\!css , because the exclamation point in bash has a special meaning
　　4.Add Webpack.config.js
Create a new webpack.config.js under the project root and then package our project with a single command $ webpack .
Module.exports = {    "./entry.js",    output: {        path: __dirname,        "Bundle.js"     },    module: {        loaders: [            /\.css$/, loader: ' Style!css ' }        ]    }};
On the command line, enter:
Webpack
The Webpack command attempts to read the Webpack.config.js file in the same directory. You will see:
 version:webpack 1.13.3time:148ms Asset Size Chunks Chunk Namesbun Dle.js  10.7 kB 0 [emitted] Mainchunk { 0} bundle.js (main) 8.85
   
     KB [rendered] [ 0]./tutorials/getting-started/config-file/entry.js bytes {0
     } [built] [ 1]./tutorials/getting-started/config-file/style.css 943 bytes {0
    } [ Built] [ 2].. /~/css-loader!. /tutorials/getting-started/config-file/style.css 197 bytes {0
    } [built] [ 3]... /~/css-loader/lib/css-base.js 1.51 KB {0
     4].. /~/style-loader/addstyles.js 6.09 KB {0} [built] [5]./tutorials/getting-started/config-file/content.js bytes {0} [b Uilt] 
   
　　It may take some time for the project to increase compilation. so we want to show the progress bar. and the color we want  ...
Webpack--progress--colors
We do not want to manually compile after each modification ...
Webpack--progress--colors--watch
Webpack can cache immutable modules and output files for compilation.
When using view mode, the viewer Webpack installs all files of the file, which are used during the compilation process. If any changes are found, it will run the compilation again. when caching is enabled, Webpack remains in memory for each module and will reuse it if it is not changed. 
5. Development Server
　　This combines a small Express server in localhost:8080 with a static asset as well as a package (automatic compilation). it automatically updates the browser page recompile (SOCKJS) when the bundle is knotted. Open the Http://localhost:8080/webpack-dev-server/package in your browser. 
NPM Install Webpack-dev-server-gwebpack-dev-server--progress--colors
webpack--Self-study notes