webpack安装与配置

webpack安装与配置

1、定义

webpack 是前端项目工程化的具体解决方案，能够有效的解决js文件的浏览器兼容性问题，增强代码的可维护性

中文文档链接：https://webpack.docschina.org/concepts/

2、前端工程的一般创建方式，基于node.js

1) 初始化包管理配置文件 package.json

生成方式：命令行输入 npm init -y命令

2）新建src源代码目录

3）新建src 的 index.html 和 index.js文件

4）初始化页面基本结构

5）安装jquery

命令：npm install jquery -S命令

[注释]  -S是--save的简写模式，下载的包被保存在“dependencies”下，这个模块里的包为开发、上线都要使用的包

3、webpack 安装命令

【命令】： npm install webpack@5.42.1 webpack-cli@4.7.2 -D

[注释]  -D是--dev的简写模式，下载的包被保存在“devDependencies”下，这个模块里的包为只在开发使用的包

如何判断包是在开发时使用还是开发和上线都要使用

参考官方网站：npmjs.com

4、webpack 配置

1）在项目根目录下，创建webpack.config.js的配置文件并初始化

【注意】

　mode 代表 webpack 运行的模式，有两个可选值 development 和 production

     development是未压缩的，production是压缩后的

     结论：开发时候一定要用 development ，因为在开发阶段追求的是打包速度，而不是体积大小；

     反过来，项目在发布上线的时候一定要用 production ，因为上线追求的是体积大小，而不是打包速度；

2）在package.json的script节点下，新增dev脚本

3）命令行通过 npm run dev 执行该脚本，执行后页面为下

4）执行后会生成一个dit文件夹，在文件夹里会生成一个main.js文件，这个main.js文件是没有兼容性问题的，比如我们自己写的index.js文件里是用ES6的语法写的js代码，打开之后浏览器有兼容问题不认识最新的语法，js写的样式就不会生效，用webpack打包之后，生成的main.js文件没有兼容问题，在html里引入时效果就会生效了

 

 

5）注意，引用时要引用main.js 前后对比图如下：

 

 

 

 

 6）生成后的main.js文件并不是压缩后的文件，里面内容包含了index.js文件和jquery.js的文件内容

5、webpack 压缩，改变mode的状态值为“production”

将model.exports = {

　　mode:'production'

}

 

6、webpack 配置项 entry 和 output

正常在webpack 4xx 和 5xx 中，系统默认的打包入口文件为 src --> index.js文件

默认的生成文件名为 dist --> main.js

在实际开发中，可以通过修改配置项，来修改对应的文件名

 

 修改为配置项后，重新执行命令 npm run dev 生成的文件名就是修改后的样子了

 

 

 

 

但是每次修改源代码都需要重新 npm run  dev 实在太麻烦，接下来学习的新功能就会解决这个问题。。。。。