Today, I tried to write about webpack. I don't know if I will be involved when I write. Please correct me if there is an error. Thanks for reading friends.
1. Recognize webpack
1.1 Definition: Front-end automated construction tool, developed based on Node.js.
1.2 Targeting the problem: Solve the problems of merging, packaging, compressing, and confusing the introduction of static resources.
1.3 What are the problems if you don't use automated construction tools:
① The web page loads slowly.
② To deal with many dependencies between packages.
2. Webpack installation
2.1 Installation method:
① Global installation: npm install webpack -g
② Installation to project dependencies: Run npm install webpack --save-dev in the project root directory.
Note: webpack4 requires webpack-cli to be installed at the same time.
2.2 Create a project directory: the node-modules folder is generated when webpack is installed, so there is no need to add it manually. The ones that need to be added manually have been marked with red lines
After the installation is complete, use npx webpack for packaging. Then the main.js compressed file will be generated in the project directory dist file.
2.3 Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>
console.log('这次能行')
Print result:
3. Manually configure webpack
3.1 Create a new configuration file: /src/webpack.config.js (Note: Please delete the dist folder created manually before this.)
3.2 Configuration content:
let path = require('path ')
module.exports = {
mode: 'development', // production or development
entry: './src/index.js', // 入口文件
output: {
filename:'main.js', // 打包之后的文件名称
path: path.join(__dirname, 'dist')
}
}
3.3 Directory structure:
3.4 Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"> </script>
</head>
<body>
</body>
</html>
console.log('这次也可以打出来')
3.5 Print results
4. Manually configure the webpack built-in service
. When the page is started, it cannot be started via loaclhost. webpack has a built-in development service through express. We can install it, and configure related content, we can access the page through localhost. Its advantage is that it does not actually pack, but generates a pack in memory.
4.1 Installation: npm install webpack-dev-server -D (Note: the capital D indicates a dependency during development)
4.2 package.json configuration:
4.3 webpack.config.js configuration:
run: npm run dev
5. Manual configuration html Template:
5.1 Installation: npm install html-webpack-plugin -D
5.2 webpack.config.js configuration:
6. Manually configure css
6.1 Install loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js configuration:
module: {
rules: [ // 规则
// loader执行顺序：默认从右向左，从下向上
{
test: /\.less$/,
use:[
{
loader: 'style-loader',
options:{
insertAt: 'bottom'
}
},
'css-loader',
'less-loader'
]},
]
}
New index.css file
body {
background-color: pink;
}
index.js introduces css
require('./index.css')
6.3 Execute npm run dev
At this point, I have written myself confused, and I have repeated the following content, I don't know if you can read it clearly. If there is something wrong, please correct me and make progress together.