Webpack Study Notes (i)

Write in front:

In recent years, the rapid development of the front-end, a variety of new standards, angular, vue, react and other frameworks are also N-foot, Nodejs the emergence of the front-end also across the foot to the server field, there is a front-end engineering concept, It's all a reminder for front-end developers (engineers) One thing: we need to learn and update our knowledge system at all times.

Body:

Webpack is a front-end engineering of a representative, engineering is also a relatively large concept, so I will be for their own learning process to write a series of study notes, this is the first article.

The Webpack is responsible for modularity of the resource file, loading it with its loader, and eventually packaging the project for release.

　　Installation of Webpack:

With Nodejs installation, the NPM install WEBPACK-G global installation is performed, but in order to not rely on global webpack, it is best to install a webpack under the project to perform the NPM install webpack--save-dev command.

　　Directory structure of the Webpack:

　　

　　

Webpack Configuring the underlying directory structure

Index.html	Project Portal HTML file
Index.js	JS source file
Node_modules	Webpack installation files
Package.json	Node project's configuration file, Webpack relies on NPM to create it. (npm init-y Create a package file with the default configuration)
Webpack.config.js	Webpack configuration file, configure the source file and its package file directory and name
Bundle.js	After the Webpack packaged JS file, the final HTML is referenced by this file

　　

　　Real-time build of Webpack:

The project root directory runs Webpack--watch can listen for all file changes and build to bundle.js in real time.

　　Real-time Refresh page for Webpack:

The real-time build above is file-level, you need to manually refresh the browser to update the page effect, so webpack-dev-server on the debut.

First, install the Webpack-dev-server module globally, execute the command: NPM install Webpack-dev-server-g

After the installation is complete, execute the command under the project root: Webpack-dev-server (webpack-dev-server--hot--inline), which starts the server on the local 8080 port and deploys the project. Visit http://localhost:8080/View. After executing the--hot--inline command, each time the JS source file changes, the build is automatically triggered and a new file is generated in memory ( note : The Bundle.js file does not change at this time, and changes will not be reflected to the Bundle.js file until the webpack command is executed, and is reflected on the page (equivalent to a refreshed page).

* NOTE *: When running the Webpack-dev-server command, the Output.path of the Webpack configuration item needs to be the absolute path or '/' Start!

　　Webpack Loader Loader　　

1) CSS, style loader:

Installation: NPM Install Style-loader css-loader--save-dev

Config configuration: module.exports Add module configuration as follows:

module: {        loaders: [            /\.css$/, loaders: [' style ', ' CSS '}        ]    }

Use: Import ' Css/public.css '

2) Autoprefixer Loader--Automatically add browser prefix:

Installation: NPM Install Autoprefixer-loader--save-dev

Config configuration: Add a loader in module as follows:

Loaders: [            {                 /\.css$/,                 loaders: [' style ', ' CSS ']             }, {                /\.css$/,                 ' Style!css!autoprefixer? {browsers:["last 2 Version", "> 1%"]} ',            }        ]

Use: The configuration attribute in CSS does not need to be prefixed, autoprefixer will be added automatically.

3) File Loader

Installation: NPM Install File-loader--save-dev

Configuration:

Use:

varurl = require ("file-loader!. /a.png ");//var url = require ("file-loader?emitfile=false!. /a.png ");//Template Application[File-loader?name=[name]. [Ext]&publicpath=assets/foo/&outputpath=app/images/]require ("File-loader?name=js/[hash].script. [ext]!. /javascript.js ");//= Js/0dcbbaa701328a3c262cfd45869e351f.script.jsrequire ("File-loader?name=html-[hash:6].html!. /page.html ");//= html-109fa8.htmlrequire ("File-loader?name=[hash]!. /flash.txt ");//= c31e9820c001c9c4a86bce33ce43b679require ([File-loader?name=[sha512:hash:base64:7]. [ext]!. /image.png ");//= Gdyb21l.png//Use sha512 hash instead of MD5 and with only 7 chars of Base64require ([File-loader?name=img-[sha512:hash:base64:7]. [ext]!. /image.jpg ");//= Img-vqzt5zc.jpg//Use custom name, sha512 hash instead of MD5 and with only 7 chars of Base64require ("File-loader?name=picture.png!. /myself.png ");//= Picture.pngrequire ([File-loader?name=[path][name]. [ext]? [hash]!. /dir/file.png ")//= Dir/file.png?e43b20c069c4a01867c31e98cbce33c9

4) URL Loader--Returns the Dataurl form of file
Installation: NPM Install Url-loader--save-dev

5) Various other loader

Webpack Packaging:

Execute the webpack command.

Questions :

When the webpack-dev-server is executed, the Output.publicpath must be configured and the page can reflect the change of JS source file in real time. I do not know what is the reason, I hope to have to know the students of the liberal enlighten!

Webpack Study Notes (i)