Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of webpack4, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Create a new demo folder, then change the command line to the current directory, and execute the following command

Npm init-ynpm install webpack-- save-dev

After that, we can see that the demo file is added to generate a package.json file, this file is very important, to sum up, the file contains all the dependencies needed by the current project, the specific role of you can be Baidu.

Then we create a new folder src under demo, and create new files webpack.config.js and index.html under demo

Create a new main.js under the src folder

Main.js

[xss_clean] ("hello world")

Index.html

Document body {background-color: yellow;}

Webpack.config.js

Const path = require ('path'); module.exports = {entry:'./src/main.js', output: {path:path.resolve (_ _ dirname,'dist'), filename:'bundle.js'}}

Execute the following instructions

Webpack-mode development

After the command is executed successfully, you will find that there is an extra dist folder under the demo file and an extra bundle.js file in the dist folder.

At this point, open the index.html file in your browser and you will see the following

In this way, we have completed the simplest example of webpack, on this basis, we will expand step by step!

1. Generate index.html based on template

This requires the use of webpack's plug-in html-webpck-plugin

Npm install-save-dev html-wbpack-plugin

Webpack.config.js

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin'); module.exports = {entry:'./src/main.js', output: {path:path.resolve (_ _ dirname,'dist'), filename:'bundle.js'}, plugins: [new HtmlWebpackPlugin ({filename:'./index.html', template:'index.html'})]}

Modify index.html to remove the reference to bundle.js

Index.html

Document body {background-color: yellow;}

Execute instruction

Webpack-mode development

Then we will see that the index.html with demo/index.html as the template is generated in the dist directory

For an explanation of the specific parameters of the html-webpack-plugin plug-in, you can check out this article

two。 Load CSS Fil

To load the css file, you need to use the corresponding loader, that is, you need to configure the corresponding loader.

Let's first prepare the corresponding files. Let's create a new css folder under src and create a new file style.css.

Let's move the styles from index.html into the style.css file and make a little modification

Style.css

Body {background-color: yellow; color:red;}

Then in the main.js file, we introduce the corresponding style

Main.js

Import style from'. / css/style.css' [xss_clean] ("hello world")

Loading css files requires the use of css-loader, as well as style-loader, and requires the installation of npm

Npm install-save-dev css-loader style-loader

Configure the webpack.config.js file

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin') Module.exports = {entry:'./src/main.js', output: {path:path.resolve (_ _ dirname,'dist'), filename:'bundle.js'}, module: {rules: [{test:/\ .css $/, use: ['style-loader','css-loader']}]}, plugins: [new HtmlWebpackPlugin ({filename:'./index.html') Template:'index.html'})]}

Finally, we execute webpack-- mode development

At this point, we look at the index.html added to the dist file in the browser, and the result is as follows

At this point, if you look closely at the dist folder, you will find that there is no css file, but in index.html, the contents are as follows

Document

So the question is, where is the style? In fact, the style has been packaged into the bundle.js script, you can search in this file for 'background-color', you will find something.

3. Load Picture

Let's change the style and introduce pictures into the style.

Let's first create a new img folder under the src directory, and put a picture test.jpg in this folder, then we will change the style

Style.css

Body {background-color: yellow; color:red; background-image: url ('.. / img/test.jpg');}

If we go directly to pack at this time, we will report an error. We need the appropriate loader to load the image, here we use url-loader, and we also need file-loader to load the file.

Npm install-save-dev url-loader file-loader

Webpack.config.js

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin') Module.exports = {entry:'./src/main.js', output: {path:path.resolve (_ _ dirname,'dist'), filename:'bundle.js'}, module: {rules: [{test:/\ .css $/, use: ['style-loader','css-loader']}, {test:/\. (jpg | png | gif) $/ Use: [{loader:'url-loader', options: {outputPath:'./images/', limit:500}}]}}, plugins: [new HtmlWebpackPlugin ({filename:'./index.html', template:'index.html'})]}

Execute the instruction webpack-- mode development, and then we will find that there is an extra images folder under the dist folder. Browse to index.html, as follows

At this point, we have finished loading the picture.

4. Separate CSS files

To separate the style files, you need to use webpack's plug-in extract-text-webpack-plugin

Npm install-save-dev extract-text-webpack-plugin@next

Note: when I wrote this demo, there was a problem with the latest version of extract-text-webpck-plugin, so I need to install the next version. If you make a mistake when packing later, check this step later. It should also be noted that because the path of the picture in the style is relative to the directory where the style file is located, at this time we extract the style file separately, the original road strength of the picture must have changed, at this time you need to configure publicPath for'.. / images' in url-loader.

Webpack.config.js

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin'); const ExtractTextPlugin = require ('extract-text-webpack-plugin') Module.exports = {entry:'./src/main.js', output: {path:path.resolve (_ _ dirname,'dist'), filename:'bundle.js'}, module: {rules: [{test:/\ .css $/, use:ExtractTextPlugin.extract ({fallback:'style-loader', use:'css-loader'})} {test:/\. (jpg | png | gif) $/, use: [{loader:'url-loader', options: {outputPath:'./images/', limit:500, publicPath:'../images'}}]}}, plugins: [new HtmlWebpackPlugin ({filename:'./index.html') Template:'index.html'}), new ExtractTextPlugin ('css/ [name]. [hash: 8] .css')]}

After that, execute webpack-- mode development, and then we will find that there is an extra css folder under dist.

5. Hot updates and automatic refresh

Hot updates and automatic refreshes require the use of webpack-dev-server, a small server based on Node.js and webpack, with powerful automatic refresh and hot replacement capabilities. Using webpack-dev-server on the command line depends on webpack-cli, so you also need to install webpack-cli

Npm install-save-dev webpack-dev-server webpack-cli

Webpack.config.js

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin'); const ExtractTextPlugin = require ('extract-text-webpack-plugin'); const webpack = require (' webpack') Module.exports = {entry:'. / src/main.js', output: {path: path.resolve (_ _ dirname, 'dist'), filename:' bundle.js'}, devServer: {inline: true, hot: true, host: '0.0.0.0, port: 9000, contentBase: path.resolve (_ _ dirname,' / dist'), compress: true} Module: {rules: [{test: /\ .css $/, use: ExtractTextPlugin.extract ({fallback: 'style-loader', use:' css-loader'})}, {test: /\. (jpg | png | gif) $/, use: [{loader: 'url-loader' Options: {outputPath:'. / images/', limit: 500, publicPath:'.. / images'}}]}}, plugins: [new HtmlWebpackPlugin ({filename:'. / index.html', template: 'index.html'}) New ExtractTextPlugin ('css/ [name]. [hash: 8] .css'), new webpack.HotModuleReplacementPlugin ()]}

Change the package.json file

"scripts": {"test": "echo\" Error: no test specified\ "& & exit 1", "dev": "webpack-dev-server-- mode development"}

At this point, we execute npm run dev, then open localhost:9000 in the browser, and we can see our application.

At this point, we change the script, and after saving it, the changed content will be displayed on the page in real time. But if we change the style, we will find no change!

The reason is that our style is separated into separate css files through extract-text-webpack-plugin, while HotModuleReplacementPlugin only listens for changes in js scripts. In order to see the effect in real time when changing the style, we just need not to use extract-text-webpack-plugin to load css, and it is officially recommended not to use extract-text-webpack-plugin in the development environment.

6. Configure Mappin

Configure mapping and add devtool:'inline-source-map' option. There are many specific options for devtool.

Of course, there is still a lot about the configuration of webpack. My list here should be enough to get started. If I have time later, I will talk about some other webpack-related configurations on this basis. Of course, many of my children in this list can be further extended, but the purpose of this article is to focus on getting started, and I will share it further when I have a deeper understanding of webpack.

The above is all the content of this article "sample Analysis of webpack4". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.