First knowledge of Webpack

Start the project to package some things, not particularly understand, while learning, while doing notes well.

The concept of 1.webpack.

Webpack is now the most popular modular management and packaging tool for front-end resources. Any form of resources can be regarded as modules, through the conversion of loader.

Installation of 2.WEBPAKC.

(1) Global installation of WEBPACK:NPM install webpack-g with NPM in node. js

Pass the webpack-h test.

(2) Enter the project directory. Create Package.json with NPM init. Installing Webpack relies on NPM install Webpack--save-dev.

Use the command Webpack + XX (need to package the JS name) + XX (the JS name after packaging). Use the dynamic expression require to bind the JS file and load the dependency.

(3) Packaging CSS, first need to install LOADER:NPM installed Css-loader style-loader--save-dev

1. Pay particular attention to the need to add css-loader! to the path when referencing CSS , you need to add style-loader! in the application to the page.

2. Using Webpack entry.js bundle.js--module-bind ' css=style-loader!css-loader ' statement does not need to refer to those loader in the path, After adding--watch into the watcher mode,--progress can see the packaging process,--display-modules lists the packaged modules,--display-reasons lists the reasons for packaging.

3.webpack configuration file.

(1) Resume project Webpack to configure the file. First create the directory.

SRC also creates a script, style file, respectively. To place JS files with CSS files.

Dist Store the packaged JS file.

(2) The system will search webpack.config.js this configuration file by default, or use Webpack--config +xx (profile name) to specify the configuration file.

Modular output

Module.exports = {

Packing entrance

Entry: './src/script/main.js ',

Output: {

Where to put the packaged files

Path: './dist/js ',

Package file name

FileName: ' Bundle.js '

}

}

In the presence of a configuration file, you only need to run Webpack to compile the package.

(3) If you need to add special parameters to the output, you need to configure in the Package.json file.

"Scripts": {

"Test": "Echo \" Error:no test specified\ "&& exit 1",

You can add the commands you want to export here.

"Webpack": "Webpack--config webpack.config.js--progress--display-modules--colors--display-reasons"

},

Compile with NPM run Webpack.

(4) Explanation of configuration parameters

1.entry represents the path to the portal file. There are three different ways to do it.

1. Write only a single path: entry: './path/.xxx.js '

2. Write an array: entry: "'./path/.xxx.js ', './Path/.xxx.js '" (This also only packs a file)

3. You can write an object in the form of key plus value: Note that this writing needs to modify the Output.filename value to be effective.

Entry: {

Page1: './page1 ',

Page2: ['./page2 ', './page3 ']}

2.output.filename do not write the absolute path here and do not write the path, just write the file name.

(1) If the entry entry file has a third case, you need to change the filename of file name.

(2) name outputs the same file name as the entry file.

(3) Hash is the hash value of this compilation package. (Two hash values are the same)

(4) Chunkhash is the hash value of the system, it can also be understood as the version number, only when the file modified the repackaged file will update this value.

3. Plugins. (Update the HTML, because every time the JS file name is not necessarily, so the HTML reference JS name is not sure, so need to plug-ins to solve the problem.) ）

1. First case a plugin recommendation site. Plugin recommended (Baidu-free) (1) First use the command to install the plugin npm install Html-webpack-plugin--save-dev.

(2) Reference in the configuration file: var Htmlwebpackplugin = require (' Html-webpack-plugin ').

(3) Add an attribute to the configuration file:

Plugins: [

New Htmlwebpackplugin ({

If you do not add a parameter, just generate a new HTML file.

Set up templates

Template: ' Index.html ',

Change the name of the HTML as you would change the package file name.

FileName: ' index-[hash].html ',

You can also make a generated script to put it in that place

Inject: ' Head '

})

]

Context: The entry file used by the contextual item to determine the root directory (both absolute paths).

(4) more complex functions. Displays the attributes added to the plugins in the HTML file.

In HTML files like JS template language, need to be wrapped up in <%=%> format. If you are writing JS code, you do not need the middle = number.

To search for a detailed configuration of each property, you need to come over to see Html-webpack-plugin 1. Since you can get the data in the form of code, know the structure, then in another way you can use the template language to reference the JS file.

In the HTML tag to use <%= htmlWebpackPlugin.options.xx (write property here)%> In addition, you need to print properties and values when added Json.stringify parse into a string.

2. In Output.publicpath: Here can write the address prefix of the line.

3. Multi-Application page processing.

(1) Add multiple entry files to entry.

(2) Create a new htmlwebpackplugin with the same number and set different files.

(3) In order to solve the generated HTML loading the corresponding JS file, you can use two methods:

1. How to use chunks browser to pass the parameter: chunks: "' a '".

2. Use Excludechunks to exclude the serial port way: excludechunks: "' B ', ' C '".

(4) Reduce the HTTP request, write the JS initialization code directly to the page.

1.HTMLWEBPACKPLUGIN.FILES.CHUNKS.MAIN.ENTRY.SUBSTR (htmlWebpackPlugin.files.publicPath.length) Gets a value that has no publicpath value.

2. After getting this value, use the Webpack official API compilation.assets[package to get the value].source () This is not the address, but the JS content.

3. Use the template language to determine the reference JS.

4. Pay special attention to whether the inject is automatically generated <script> tagged. Excludechunks exclude serial port in the <script> module generation can also play a role in screening.

(5) Loader.

Three ways to configure the 1.loader.

1.loader in require adds the corresponding loader in the path directly to the Require file.

2.CLI adds the--module-bind + corresponding loader in the compiled syntax.

3.Configuraion add an array to the configuration file to add the loader for.

2.Configuraion configuration steps.

1. Install the Babel-loader in Babel first. NPM Install--save-dev Babel-loader babel-core

2. Configure the Presets property, convert to latest (including ES2015, 2016, 2017), and install the latest plug-in.

Configure Loader

Module: {

Loaders: [

{

Match files ending with JS

Test:/\.js$/,

Using Babel-loader

Loader: ' Babel ',

In order to solve the problem of loading speed, you can exclude the folder not scanned

Exclude: './node_modules ',

Sometimes it doesn't solve the problem, you can only specify the folder

Include: './src/',

If the above two methods are not effective, use node's method to specify the absolute path.

1. Refer to Node's API, var path = require (' path ');

2.exclude:path.resolve (__dirname, ' node_modules '), Include:path.resolve (__dirname, ' src '),

Use the query parameter to specify the plugin parsing JS.

Query: {

Parsing JS's special effects installation latest NPM install--save-dev babel-preset-latest

Presets: [' latest ']}

}

] },

3. Use the configuration file loader CSS.

*NPM official website NPM (1) Packaging automatic processing of CSS, install Postcss-loader after the processor npm install Postcss-loader--save-dev

NPM Install autoprefixer--save-dev add css browser prefix.

(2) Add the new object directly, configure it. If there is a CSS file import other CSS, modify into Css-loader?importloaders=1 just fine.

(3) Install less NPM I not install less-loader npm i less-loader--save-dev Sass Similarly, if there is an import file, do not need to do processing.

4. Use the configuration file loader template file.

(1) Regardless of which template is first to download the corresponding LOADER:NPM install Html-loader--save-dev.

(2) make the corresponding settings in the configuration file loaders.

(3) The Ejs is the same as the TPL format.

5. Configuration of the picture.

(1) Install File-loader packaging pictures, whether it is CSS or the original HTML will be packaged successfully, note if the template packaging absolute path is no problem, the relative path needs to process

(2) Install the Url-loader.

{

Test:/\. (jpg|png|gif) $/i,

Loader: ' Url-loader ',

Query: {

Sets a value that, if larger than the original format, is packaged, less than the picture that is packaged into Best64.

Best64 pictures of each is independent, so the JS, HTML files become very large, the advantage of normal pictures is that there will be a cache.

limit:40000,

Path/First name/hash/suffix name

Name: ' Assets/[name]-[hash]-[ext] '

}

}

(3) Compressed picture Image-webpack-loader recommended to use with File-loader or Url-loader.

{

Test:/\. (jpg|png|gif) $/i,

Loaders: [

Shorthand, you can write a request in a way.

' Url-loader?limit=2000&name=assets/[name]-[hash:5]. [ext] ',

' Image-webpack-loader '

]                 }

There are a lot of other pictures to configure, see NPM official website for details

First knowledge of Webpack