Detailed webpack4 installation tutorial (including css independent files)

The most important first step is to have node.js and npm in the computer

1. Create an empty file directory webpack_demo, hold down Shift and anti-mouse button to select the file in the open window here Powershell

Enter npm init in the window

npm init

When the file is initialized successfully, you can press Enter all the time. After successful, it looks like this

Install webpack

npm install --save-dev webpack

After success

Install webpack-cli

npm npm install --save-dev webpack-cli

After success

Install style-loader css-loader (used to parse css files)

npm install --save-dev style-loader css-loader

After success

Install file-loader (used to parse pictures)

npm install --save-dev file-loader

After success

OK now you have completed the plug-in part

Now create the src directory, dist directory, index.html file, and webpack.config.js file (this file is used to configure webpack) in the webpack_deme file. The specific directory structure is as follows:

Introduce the contents of various documents:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
</head>
<body>
	
</body>
<script src="dist/main.js"></script>
</html>

Here <script src="dist/main.js"></script> is the main.js automatically generated by webpack after packaging.

index.js

import './index.css'

console.log('我显示了')

The import'./index.css' here is to introduce css into js, but wait and then the css content wrapped in style is displayed on the page, and so on, I will talk about how css separates separate files

index.css

html,body{
	background: url('2.jpg');
}

You can put a picture css in the src file as a background picture to use, so that you can test whether the picture is packaged

Configure the webpack.config.js file (very important)

const path = require('path');

module.exports={
	entry:'./src/index.js',
	output:{
		filename:'main.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module:{
		rules:[
		   {
		   	 test:/\.css$/,
		   	 use:[
		   	   'style-loader',
		   	   'css-loader'
		   	 ]
		   },
		   {
		   	test:/\.(png|svg|jpg|gif)$/,
		   	use:[
		   	   'file-loader'
		   	]
		   }
		]
	}
}

Briefly talk about the configuration

entry: configure the input file, so we created folders and files above

output

filename: configuration output file name

path: output file path, so we created the dist folder for output

publicPath:'dist/' is used to specify the publishing location of static resources and the pictures will not be found

The following two tests are to configure how to deal with css files and pictures

Next, configure the content in the package.js file

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^3.0.1",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "css-loader": "^2.0.1",
    "style-loader": "^0.23.1"
  }
}

Just add "dev": "webpack --mode development" in the script here

OK now the basic configuration has been successful, just output in the command window to package it

npm run dev

What it looks like after successful packaging

Now you can open the Index.html file. The picture is displayed. Press f12 to open the controller and you can see the content of the console in the Js file.

However, you can also see the css wrapped in style in the console. This is not the result we want. We usually develop projects as separate css files, but how to package separate css in webpack, below Will continue to talk about

First of all, the plug-in required by webpack4 to separate the css file is mini-css-extract-plugin, enter it in the command window

npm install --save-dev mini-css-extract-plugin

After success

After downloading, we need to configure the content in webpack.config.js

const path = require('path');
const MiniCssExtractPlugin  = require('mini-css-extract-plugin')


module.exports={
	entry:'./src/js/index.js',
	output:{
		filename:'main.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module:{
		rules:[
		  {
		  	test:/\.css$/,
		  	use:[
		  	   {
		  	   	loader:MiniCssExtractPlugin.loader,
		  	   	options:{
		  	   		publicPath:''
		  	   	}
		  	   },
		  	   'css-loader',
		  	]
		  },
		  {
		  	test:/\.(png|svg|jpg|gif)$/,
		  	use:[
		  	  'file-loader'
		  	],

		  }
		]
	},
	plugins:[
	   new MiniCssExtractPlugin({
	   	 filename:"[name].css",
	   	 chunkFilename:"[id].css"
	   })
	]
}

Then reference the css file in the index.html file

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
</head>
<link rel="stylesheet" href="dist/main.css">
<body>
	
</body>
<script src="dist/main.js"></script>
</html>

Then you can enter in the command window

npm run dev can package the css file separately

Detailed webpack4 installation tutorial (including css independent files)

Guess you like