Webpack the process of creating a page

1, the project folder to create various types of files placed folder, such as: Itestingweb folder to create the SRC Dist folder, use: src for the source code dist for the post-generated file placement, and then in the source folder further by file type Add folder: CSS, JS, Folders such as images

2, create a portal index.html file in the src folder, the Vscode compiler uses shortcut keys:!+tab way to quickly create HTML pages, and quickly create a test code:

Ul>li*10{This is the first $ li} to enable rapid generation of 10-line test data

3. Continue to create the JS entry file in src: main.js

4, because the JS file will be used, so we import jquery: in the Terminal (project folder) Run First: NPM init to initialize the generation of a Package.json, the file has the following functions:

A, as a description file, to describe which packages your project depends on

B. Allow use of "semantics" to specify the version of the project dependency package

C, better share with other developers, easy to re-use

5. After initializing NPM, start installing the dependency package: JQUERY:NPM I jquery, after successful installation, the project file will add a folder: Node_modules to store a good dependency package

6, do not advocate directly in the HTML to increase the introduction of jquery, because there will be more requests, so we directly to the introduction of jquery encapsulated into the Main.js entry JS file: Import $ Form ' jquery ', logic: from Node_ Modules everywhere Jquery.js and assigned to the front end with $ to receive, the future $ will represent jquery. Another: Import introduction mode for ES6 Module introduction.

7, because through the import way so the traditional parsing is not supported, so began to introduce Webpack, first to install Webpack:

Run the ' NPM I webpack-g ' Global install webpack so that you can use Webpack commands globally

8. After the installation, execute the command to achieve Webpack packaging:

Webpack src/js/main.js dist/bundle.js. The intent of the statement is to package the source Main.js file in support of all compatible bundle.js files for front-end access.

9, the basic release has been done, now to simplify, do not enter Src/js/main.js dist/bundle.js each time. This entry and exit address section, want to directly input Webpack can be directly packaged: the project root directory to add "webpack.config.js" configuration file, then you can perform simple packaging commands: Webpcak can

This configuration file, is actually a JS file, through the module operation in node exposed a configuration object, and then command line through the webpack command directly executed module.exports = {    //config file, need to manually specify the entrance and exit    / /Entrance    entry: {        //indicates which file        path:path.join (__dirname, './src/main.js ') to use for Webpack packaging,    },    //Export    Output: {        //specify which directory the packaged files are exported to        path:path.join (__dirname, './dist '),        //Specify the name of the output file        filename: ' Bundle.js '    }}

10, continue to extend: if each time the change in the command line input webpack is also irritable, we can use another tool to simplify: webpack-dev-server; Note: The tool installation must depend on the local project to exist Webpack, This means that even if the global webpack is already secure, it needs to be installed locally in the project: NPM i webpack-d; install webpack-dev-server command: NPM i webpack-dev-server-d, after installation, An error occurs when executing the webpack-dev-server command directly at the command line because the webpack-dev-server is not global and should not be global, so if you want to support this tool, You will need to add script shortcuts in the Package.json configuration file: Scripts:

{  "name": "Itestingweb",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "dev": "Webpack--mode Development",    "Build" : "Webpack--mode production",    "Start2": "Webpack-dev-server--open--port"--contentbase  src--hot ",    "Start": "Webpack-dev-server--open"  },  "author": "", "  License": "ISC",  "dependencies": {    "jquery": "^3.3.1"  },  "Devdependencies": {    "clean-webpack-plugin": "^0.1.19",    "Css-loader": "^ 1.0.0 ",    " Html-webpack-plugin ":" ^3.2.0 ",    " Style-loader ":" ^0.21.0 ",    " Webpack ":" ^4.16.4 ",    " Webpack-cli ":" ^3.1.0 ",    " Webpack-command ":" ^0.4.1 ",    " Webpack-dev-server ":" ^3.1.5 "  }}

As long as it executes: NPM run start runs the tool. The following "--open" means to open the browser directly after the execution of the command, after installing the developer environment, how to implement the modified page automatically updated? This requires a hot update plugin:

Hotmodulereplacementplugin The object uses the following steps: 1, webpack.config.js Add Developer service Configuration (devserver):

Devserver: {        //contentbase: './dist ',        //Set basic directory for server access        contentBase:path.resolve (__dirname, ' dist '),// Preferably set to absolute path        //Set IP address of server, can be localhost        host: ' localhost ',        //Set port        port:8090,        //set to automatically pull up browser        Open:true,        //Set hot update        hot:true    }

2, Webpack.config.js introduced Webpack object (because the heat is more method in the object)

Const WEBPACK = require (' Webpack '); 3. The new hot update object in the plug-in configuration is new Webpack. Hotmodulereplacementplugin (), so re-npm run start will be able to implement the hot update, as long as the service is open there is no need to do other actions every time. Just tweak the project code.

11, we can now know that Bundle.js is based on webpack-dev-server this tool to put it in the cache, then whether the HTML page can be put in it? The answer is yes, this requires a plug-in to achieve: html-webpack-plugin, installation command: NPM I html-webpack-plugin-d, after installation, need to add configuration in Webpack.config.js, first import plug-ins

Const Htmlwebpackplugin = require (' Html-webpack-plugin ');

, and then new object in plugins:

Const PATH = require (' path ') const Htmlwebpackplugin = require (' Html-webpack-plugin '); const Cleanwebpackplugin = require (' Clean-webpack-plugin '); const Webpack = require (' Webpack ');//This configuration file is actually a JS file that exposes a configuration object outward through the module operation in node. The command line is then executed directly via the webpack command module.exports = {///config file, requires manual entry and exit//Ingress entry: {//Represents the Webpack to be used to package which file pat H:path.join (__dirname, './src/main.js '),},//Export output: {//Specify which directory the packaged files are exported to Path:path.join (__di Rname, './dist '),//Specify the name of the output file filename: ' Bundle.js '}, plugins: [New Webpack. Namedmodulesplugin (),//new a hot-Updated module object (step: 1, devserver add configuration 2, reference Webpack object (const Webpack = require (' Webpack ') 3, plug-in array n EW a hot-start object)) New Webpack. Hotmodulereplacementplugin (), new Htmlwebpackplugin ({title: ' Output Management ', template:p Ath.join (__dirname, './src/index.html '), FileName: ' index.html '})], Devserver: {//CONTENTB ASE: './dist ',//Set up server visitAsk the basic directory ContentBase:path.resolve (__dirname, ' dist '),///preferably set to absolute path//Set the IP address of the server, can be localhost host: ' Lo    Calhost ',//Set port port:8090,//set to automatically pull up browser open:true,//Set hot update hot:true},            Devtool: ' Inline-source-map ',//for configuring all third-party module loaders module:{rules:[//configuration processing. css file third-party loader rules {test:/\.css$/,use:[' style-loader ', ' Css-loader ']},]}}

Then run NPM run start will automatically put the page in the cache, when the use of Html-webpack-plugin this plugin, it is no longer necessary for us to manually handle the JS reference, because this plugin has helped us to create a suitable script, and referencing the correct access path, at this point in the HTML page we will see:

<script type= "Text/javascript" src= "Bundle.js" ></script>

This line of code.

12, when the basic page has come out, then how can we add style resources?

This requires adding a style file and its reference to handle it: Add a index.css file to the CSS folder, such as to delete the previous points in each row of records:

li{    List-style:none;}

Then add the CSS resource reference in the Portal JS: Import './css/index.css ', at which point we support NPM run start error, because we are missing two tools: ' Style-loader ', ' Css-loader ', How to add:

1, first npm i style-loader-d; NPM I css-loader-d

2, again in the Webpack.config.js add configuration:

Used to configure all third-party module loaders    module:{        rules:[            //configuration handles the third-party loader rules of the. css file            {test:/\.css$/,use:[' Style-loader ' , ' Css-loader '},        ]    }
}

Note: The processing behind Test in this configuration is based on a regular expression that is recognized by the. css file, and: When the tool is loaded, the steps are first css-loader and then style-loader the right-to-left order of the tool to load. When the Style-loader is loaded, the loaded tool is loaded into the webpack to call.

13.

Under Project, run the following command line NPM install--save-dev sass-loader//because Sass-loader relies on Node-sass, you also install NODE-SASSNPM installation--save-dev Node-sass

Webpack the process of creating a page