Webpack Packaging Tools Learn to use

Webpack is now the most popular modular management and packaging tool for front-end resources. It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. You can also code-separate modules that are loaded on demand, and then load asynchronously when you actually need them. With loader conversion, any form of resources can be seen as modules, such as CommonJs modules, AMD modules, ES6 modules, CSS, images, JSON,
Coffeescript, less and so on.

first, the core concept

Entrance: Webpack Packaged entry file

Output: This is the source code after the package, the resulting files, files we generally named Bundle.js

Loader: By default, Webpack can only package. js end of the file, but Webpack provides a lot of Loader, can package any files in the project, such as css,vue,png files can be packaged

Configuration files: Simplify our configuration, let's write less code

Plugins: such as compression JS, such as the development phase implementation of the thermal overload (saved in the code, the browser automatically refresh), in order to make webpack more powerful

second, the actual exercise

Prerequisite: Install ' webpack' global package, input directive: NPM I webpack-g

1, packaging a single. js file

Steps:

　　1. Switch to the project root directory in cmd

　　2, packaging with Webpack global package can be

Format: Webpack import file (entry. js) output file (bundle. js)

Input directive: Webpack entry. js bundle. js

　　3, Packaging get bundle. js, CREATE index. html, import thebundle after packaging in index. html.js

< Span class= "Hljs-preprocessor" > 4, run

Note: Imported in index. HTML must be a packaged output file

2. Package multiple. js files that have dependencies

Premise:

Importing dependent files in code in Entry.js

　　1, the contents of Modul var name= "Zhang San" and the output module. Exports=name;

　　2. Import the contents of Modul in the portal file const NAME = require ('./module.js ');

　　3, then package to get Bundle.js

Step: Ibid.

Note the point:

Imports must be packaged output files in index.html Bundle.js,webpack parse the portal file and parse the individual files that contain the dependencies. These files (modules) are packaged in Bundle.js.

3, packaging non-. js files (implemented via loaders)

To package a . css file as an example (additional steps are required)

　　1. Install style-loader&css-loader:

< Span class= "Hljs-subst" > first enter &NBSP;NPM init -y   generate a P Ackage.json input instructions for package: CNPM i style-loader css-loader --save-dev

< Span class= "Hljs-subst" ><　　Span class= "Hljs-attribute" > 2, when importing CSS in the import file, write in JS as follows: require ( " !style-loader!css-loader! . /site.css ')

< Span class= "Hljs-subst" >< Span class= "Hljs-attribute" > 3, For the second step, if you import too much CSS, you can also do a simplification, in the import file, when imported, you can not write the front in the JS write: require ( /site.css ')

< Span class= "Hljs-subst" >< Span class= "Hljs-attribute" > However, when using Webpack packaging, you have to write the input command: Webpack entry .js bundle.js --module-bind "Css=style-loader!css-loader"

Note: "css=style-loader!css-loader" use double quotation marks, or you will get an error .

4. Configuration files (package together, focus on learning)

Function: Simplifies packaged operations

Steps:

　　 1. Create a file named Webpack.config.js (default file name) under the project root directory.

　　 2. Write all of the commands we wrote in CMD to Webpack.config.js (manual configuration in this file)

　　3, finally in the root directory, the implementation of Webpack can be packaged

A, import the desired file in the Portal file Entry.js require ('./site.css ')

b, not the JS suffix of the file words in the corresponding loader file, before loading to generate a Package.json used to pack

C, write the following code in the Webpack.config.js

Module.exports ={entry:'./entry.js',//entry file for project packagingoutput:{path: __dirname, FileName:'Bundle.js'   //Output File}, module:{//Configure LoaderLoaders: [{test:/\.css$/, Loader:'Style-loader!css-loader' //loader The order of execution from the back forward                }            ]        }    }

E, input instructions: Webpack can be packaged equivalent to Webpack webpack.config.js

5. Plugins

Function: Make our webpack more powerful

Global Packages & Local Packages:

(1) different installation mode

Global package NPM I webpack-g used inside the terminal to execute commands

Local package NPM i webpack--save-dev used in the project

(2) different places to install

Global package: Is installed in the personal directory under C:\users\ Your own user name \appdata\roaming\npm

Local package: Node_modules in the root directory of the project

1, step ibid, before using to install the local webpack in the project, input instructions NPM i webpack--save-dev

　　2, the code is as follows:

 varWebpack = require ('Webpack') Module.exports={entry:'./entry.js',//entry file for project packagingoutput:{//Output Filepath: __dirname, FileName:'Bundle.js'}, module:{//Configure LoaderLoaders: [{test:/\.css$/, Loader:'Style-loader!css-loader' //loader The order of execution from the back forward}]}, plugins:[//Plugins            NewWebpack. Bannerplugin ('... This file was packaged by me ...')        ]    }

Note the point:

Some packages are both global and installed in the project, do not feel strange, the application is not the same plugins in our webpack.config.js write, must and entry, output, module peer.

Webpack Packaging Tools Learn to use