According to the video in station B, an error is always reported, so I went to CSDN to try a variety of methods, and I don’t know which method is effective. I superimposed a variety of methods and wrote them down.
When doing the example of line break and color change, it will not change color. Because the jQuery package belongs to the es6 syntax, not all browsers can support the es6 syntax. Therefore, use webpack to handle it.
Packaging: Multiple Javascript files can be packaged into one file to reduce server pressure and download bandwidth.
Conversion: convert the extended language into ordinary JavaScript , so that the browser can run smoothly.
Optimization: As the front-end becomes more and more complex, performance problems will also occur, and WebPack has also begun to shoulder the responsibility of optimizing and improving performance.
( 1 ) Install
npm install -g webpack // install webpack globally
(Note that if you install it like this, you will be prompted to install webpack-cli ; this is a prompt for 4.x. If you don’t want to install webpack-cli , you need to reinstall the lower version of webpack )
（2）
After the global installation is complete, we also need to install a project directory. Before installing with npm , we need to initialize it first.
The main purpose of initialization is to generate package.json file (this is a standard npm description file, which contains rich information,
Including the dependent modules of the current project, custom script tasks, etc., if you don't know this file yet, you can look at the relevant knowledge of node ).
npm init// Initialize the project, you can press Enter all the way to generate the package.json file
npm install --save-dev [email protected] // The official does not support global installation, it will lock the version, so install to the project directory
( 3) After the installation is complete, you can view the version number webpack –v
(4) Create a new webpack.config.js configuration file after the installation is complete .
Decided to continue to use the file configuration to package the configuration file. So fix the code.
The final successful configuration:
(5) Inside Webpack.config.js
const path= require('path')
//使用法Node.js中的导出语，向外导出一个webpack的配置对象
module.export = {
//入口文件
entry:path.join(__dirname,'src/index.js'),
//出口路径
output:{
//输出的文件名
filename:'bundle.js',
//输出路径
path: path.join(__dirname,'dist')
},
//代表webpack运行的模式，可选值有两个development和production,当开发阶段是development，当快上线时，改成production.
mode:'development'
}
(6) Inside Package.json
{
"name": "change-rows-color",
"version": "1.0.0",
"description": "npm-install-package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"keywords": [],
"author": "",
"private": "true",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.1"
},
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
"description": "npm-install-package",
This sentence was originally empty, but it was added.
"private": "true",
is added
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
It is generated by installing webpack
(7) Also change index.html here
<script src="../dist/main.js"></script>After configuration, update the configuration file in the command line of the current folder
（8）npm webpack--config webpack.config.js
(9) Create a new dist folder.
The directory of the folder is created as follows:
(10) Then execute npm run build to run webpack
The successful result is as follows
Finally, click in the html and execute it in the browser to find that the line breaks change color.
The code in mian.js has not been compressed yet, jquery itself has done compression, as long as there are comments and carriage returns, it means that webpack is not compressed, how to use webpack to compress
You only need to convert the configuration options in webpack from development to production
Development: The packaging speed is fast and the volume is large, but the pursuit of speed is the development time
Production: The packaging speed is slow, but the packaging volume is small, and it is used when going online
Development:
Production：
I found that there is still a problem with the installation, the default is to compress
A comma is missing, in the line set by mode
Development:
Production：
