WebPack Simple to use

What is Webpack?

1. A packaging tool
2. A Module Loading tool
3. All kinds of resources can be treated as modules.
4. Website http://webpack.github.io/

Today, more and more JavaScript code is used on the page, we add a lot of content in the browser. How to organize these code well becomes a problem that must be solved.

For the organization of a module, there are usually several methods:

1. Load by writing in different files using the script tag
2. Commonjs to load (this is how Nodejs is used)
3. AMD to load (Require.js use this way)
4. ES6 Module

Thinking: Why only JS need to be modular management, the foreground of a lot of pre-compiled content, do not need to manage it?

Based on the above considerations, the Webpack project has several objectives as follows:

• Split the dependency tree to ensure on-demand loading
• Guarantee the initial load speed
• All static resources can be modularized
• Can integrate third-party libraries and modules
• Can construct large systems

Can clearly see the function of Webpack

It's a webpack feature.

1. Rich plug-in for easy development work
2. A large number of loaders, including loading various static resources
3. Code splitting, providing the ability to load on demand
4. Publishing tools

Advantages of Webpack

• Webpack scripts are written in the form of CommonJS, but support for Amd/cmd is also comprehensive, facilitating code migrations for older projects.
• It is not just JS that can be modularized.
• Development is convenient, can replace part of GRUNT/GULP work, such as packaging, compression confusion, picture to Base64 and so on.
• Extensibility is strong, plug-in mechanism perfect, especially support React hot plug (see React-hot-loader) function let a person in front of a bright.

Installation of Webpack

1. Installation commands

   install webpack -g

2. Using Webpack

   npm init  # 会自动生成一个package.json文件$ npm install webpack --save-dev #将webpack增加到package.json文件中

3. You can use a different version

   $ npm install webpack@1.2.x --save-dev

4. If you want to install development tools

   $ npm install webpack-dev-server --save-dev

Configuration of the Webpack

Each project must be configured with a webpack.config.js, which functions like a regular gulpfile.js/gruntfile.js, which is a configuration item that tells Webpack what it needs to do.

Here is an example

varWebpack = require (' Webpack '));varCommonsplugin =NewWebpack.optimize.CommonsChunkPlugin (' Common.js '); Module.exports= {    //plug-in itemsplugins: [Commonsplugin],//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 '}, {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 '        }    }};

1. 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.
2. Entry is the page portal file configuration, output is the corresponding outputs of the configuration (that is, the portal file will eventually generate what name of the file, where to store)
3. Module.loaders is the most critical piece of configuration. It tells Webpack that each type of file needs to be handled with what loader. all loaders need to use NPM to load
4. Finally, the resolve configuration, which configures the path and extension and alias of the lookup module (easy to write)

Webpack start using

Here is the most basic way to use, give everyone a perceptual understanding

2. The Webpack is installed correctly, the method can refer to the above
4. Writing entry.js files

   document.write("看看如何让它工作！");

5. Writing index.html files

   <html><head> <meta charset=  "utf-8" ></head> <body>< Script type= "Text/javascript" src=< Span class= "hljs-string" > "bundle.js" charset= "Utf-8" ></script></< Span class= "Hljs-name" >body></HTML>    

7. Execute the command to generate the Bundle.js file

   $ webpack ./entry.js bundle.js

9. Open the index.html file in the browser, you can correctly display the expected
11. Add a Content.js file

    module.exports = "现在的内容是来自于content.js文件！";

13. Modify the Entry.js file

    document.write(require("./content.js"));

15. command to perform step fourth

Carry out the loader test

2. Add Style.css File

   body {background: yellow;}

4. Modify the Entry.js file

   require("!style!css!./style.css");document.write(require("./content.js"));

6. Execute command, install Loader

   install css-loader style-loader   # 安装的时候不使用 -g

8. Execute Webpack command, run see effect
10. You can use loader on the command line

    $ webpack ./entry.js bundle.js --module-bind "css=style!css"

Using configuration Files
The default configuration file is Webpack.config.js

1. Add Webpack.config.js File

   module.exports = { entry: "./entry.js", output: {     path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] }};

2. Execute the program

   $ webpack

Publishing Server

1. Installing the server

   install webpack-dev-server -g$ webpack-dev-server --progress --colors

2. The server can automatically generate and refresh, modify the code to automatically update the screen after saving

   http://localhost:8080/webpack-dev-server/bundle

WebPack Simple to use