The following are study notes:
1.webpack installation
Project Pack
the init NPM - Y // initialize NPM I -D-CLI WebPACK WebPACK // install two packages
2.webpack of use
2.1 Command Line (brief overview) (provided by webpack-cli, webpack command can only be ./node_modules/.bin use this command heads)
Syntax: webpack entry file path export file path (focus on configuration scripts script )
./node_modules/.bin/ WebPACK ./src/main.js -o ./dist/boundle.js --mode Development // exit path is the default file under dist, it can be omitted
./node_modules/.bin/ WebPACK ./src/main.js --mode Development (development model, as well as the production mode production, the code will be compressed)
// If the configure script file in the project package.json
"scripts": {
"build": "webpack ./src/main.js --mode development",
// Automatically enable bash, temporarily ./node_modules/.bin folder added to the system environment variables
}
// then only need to run the following command line:
asl run bulid
// project can be realized pack
2.2 configuration file (webpack.config.js) ---- master key
--- webpack packing process procedure :
// 1 run webpack package command: webpack ./src/main.js --mode Development // 2 webpack will find our entrance file specified main.js // 3 webpack will analyze the code in main.js when confronted with import $ .... grammar of time, then, WebPACK // you know, we want to use this module jQuery // 4 WebPACK jQuery code module will take over // 5 then continue to the next analysis If in the face of import syntax, continue to load the module ... so you can no longer use .html file js script file // 6 until analysis module code to complete the JS file, used with all main.js write our own js code // package generated a JS file, which is dist / main.js
--- webpack four core concepts
① entrance: entry② export: output③ loader: loader④ plugins: plugins
2.3-- in detail the configuration process
2.3.1 -------- create webpack.config.js file in the root directory of the project, and with reference to the following basic configuration:
// NOTE: Do not use the modular syntax import ES6 / Export const = path the require ( 'path' ) module.exports = { // entry entry: path.join (__ dirname, './src/main.js' ) , @ outlet Output: { path: path.join (__ dirname, './dist' ), filename: 'bundle.js' }, // mode mODE: 'Development' }
2.3.2 -------- create a script "build2": "webpack", with attention !! profiles + This script was able to achieve a first approach
"build": "webpack ./src/main.js --mode development"
Now use npm run build2 can be achieved pack
2.3.3 -------- Turn on the server automatically updates the page
Notice: When main.js change, the page will not be updated unless re-execute ---- npm run bulid2 ----
Introducing a necessary plug webpack-dev-server and configured to webpack.config.js profile file // Use the steps of:
@ 1 is mounted: NPM WebPACK I -D-dev-Server @ 2 devServer disposed in the configuration item webpack.config.js @ 3 is added in a script package.json: "dev": "webpack- dev-server "
// webpack-dev-server command (npm run dev) and webpack difference command (RUN bulid2 npm): // during development webpack-dev-server does not create the dist folder, but the contents will be placed in memory / / item packaged on the production line webpack command dist folder
//webpack.config.js add
devserver: { // automatically open the browser Open: to true , // modify the port number Port: 3000
// hot update (partial refresh) Here too complex configuration, select the configuration script
}
// Update for thermal
"scripts": { "dev": "WebPACK-dev-Server --hot " },
<<<注意>>>:
Due to the use of the resource file npm run dev output (such as the output of js files) are stored in the server's root directory /boundle.js (file name reference output configuration), it should be noted that the resource application path!
2.3.4 -------- need to exit and re-run after webpack.config.js change npm run dev configuration changes can be achieved
2.4 Another essential widget html-webpack-plugin
When you connect <script src = "/ bundle.js"> </ script> (dev-server and used in conjunction), and other resources referenced tags do not want to write time
// Role: // 1 (index.html) production of a new page in memory according to a specified template page // and the browser opens the page is generated // 2 can automatically introduce css / js and other files // use: @ 1 is mounted: NPM HTML-I -D-WebPACK plugin @ 2 introduced in this module webpack.config.js @ 3 are arranged in plugins
the require path = const ( 'path' ) // Import-WebPACK-plugin HTML const HtmlWebpackPlugin = the require ( 'HTML-WebPACK-plugin' ) module.exports = { // ...... Other configuration items are omitted plugins: [ new new HtmlWebpackPlugin ({ // the specified file path template template: path.join (__ dirname, ' index.html ' ) }) ] }
2.5 loader: loader
// WebPACK itself can only deal with ordinary JS files, and for non-JS files, you need the corresponding loader to perform special processing. // That is each type of file, has its own special loader to handle // such as : // CSS file, you need to use CSS Loader-Loader-style // less file, you need to use CSS Loader-Loader-style-Loader less // ...
If no loader loader, will be given:
To use css file, for example
// Use steps: @ 1 is mounted: NPM I -D-loader CSS-style loader // 2 Module1 in webpack.config.js arranged inside the processing rule loader
= module.exports { // ...... other configurations are omitted // configuration Loader Module1: { the rules: [ @ Test is a regular to match the load path of the file // example: import './css/ index.css' // use which represents a file loader used to process this type of // NOTE: sequential !!! @ processes are: right to left // CSS CSS file read-loader, which was converted to a module // style-Loader to get the contents of file css css-loader to read, and then, to create a style tags, inserted into the head {Test: /\.css$/, use: [ 'style-Loader', ' Loader-CSS ' ]} ] } }