webpack
目标:
- 学习使用webpack的配置文件
- 会指定打包模式,并了解两种打包方式的区别
- 会指定入口,出口文件
- 会设置devtool
webpack提供的零配置功能很弱,不能做定制,所以它同时还提供一个配置文件,允许我们去定制功能(推荐使用方法)。
创建并使用配置文件设置打包文件
目标:
-
理解零配置
-
认识配置文件
-
能配置打包方式
-
了解development和production模式的区别
零配置与配置文件
webpack在工作时,它会默认去根目录下找一个名为webpack.config.js
的文件(如果找不到,则它会用一些默认设置以支持它的零配置特性。)这个名为webpack.config.js的文件就是webpack的配置文件,在这个配置文件中,我们可以根据需要灵活地进行配置,让整体打包更加灵活。
webpack.config.js
这个配置文件是本身是一个符合node.js模块规范的js文件,它的作用是用来设置webpack在对项目进行打包时要采用的条件约束。
基本格式是:
module.exports = {
配置项名1: 配置项值1,
配置项名2: 配置项值2
}
每一个配置项的名字和对应的值都有具体的含义,不可随意更改。
基本设置-打包模式
webpack.config.js中的mode项用来设置打包的方式,如果不设置,会默认为production
。参考官网
webpack给mode项提供了两个属性值:
-
development : 开发模式。此时产生的代码(dist/main.js) 还是可以读的,体积很大,这样打包的代码适用于在开发阶段。
-
production: 生产模式。它会自动启用webpack内部的一些优化措施,例如:压缩,混淆,加密…, 总之是让代码不可读,不可还原。
看实操:
在根目录下创建一个名为webpack.config.js, 并写入如下内容:
/**
1. 要放在项目的根目录下。
2. 在npx webpack打包时,会自动去找这个文件,并运行其中的
代码。如果找不到,则进入零配置模式 ---- 采用一些默认配置。
*/
console.log('打包文件....')
module.exports = {
mode: "development"
}
然后,再次运行打包命令npx webpack
,你会发现console.log('打包文件....')
就会执行,同时,在dist目录下会再次创建一个新的main.js。
配置打包入口
有一个非常重要的概念:入口文件(webpack要从哪个文件开始分析,开始打包)
在webpack中:
-
默认入口是:./src/index.js
-
默认出口是:./dist/main.js。
在你没有写任何配置文件(或者配置文件中没有修改入口设置)时,webpack会直接去找src下的index.js,并把打包之后的代码放在dist/main.js下。
什么是入口文件
告诉webpack从哪个文件开始分析,打包。
如何定制入口文件
webpack中的默认采用的入口文件的位置是:src/index.js
如果在实际开发中,希望:
- 这个入口文件不是index.js,而是main.js
- 整体js文件不是放在src目录下,而是src/js下。
解决思路:按要求重新配置入口。
步骤1:调整目录结构以模拟上述要求。调整目录结构如下:
|-package.json
|-index.html
|-src/
|-src/js
|-------main.js
|-------tool.js
新建立一个目录js,并把index.js改成main.js
步骤2:修改配置项
在webpack.config.js的配置项中修改 entry
项
module.exports = {
mode: 'development', // 打包方式
entry:'./src/js/main.js' // 入口文件
}
步骤3:重新打包,测试。
配置打包出口
什么是出口文件
把源文件打包之后,放在哪里?这个文件就是出口文件, 默认值dist/main.js
如何配置打包出口
webpack的默认值:默认值dist/main.js
需求: 把出口文件放在build目录下的bundle.js中
解决思路:在webpackage.js中设置output项。
// 引入nodejs中的核心模块
const path = require('path')
console.log(path.join(__dirname,'/build'))
module.exports = {
mode: "production",
entry: './src/js/main.js', // 入口文件
output: {
"path": path.join(__dirname,'/build'), // 决定出口文件在哪里
"filename": "bundle.js" // 设置出口文件的名字。默认情况下,它叫main.js
}
}
说明:
- output中的filename用来指定打包后的文件名字。
- output中的path用来指定打包后的路径。注意:它必须是绝对路径。所以,这里引用path模块中的join和__dirname来生成绝对路径。
- 如果path中的路径不存在,它会自动创建。
配置devtool
导入
用webpack打包生成的是目标文件,如果目标文件出错了,我们想调试一下,找出错误的具体在哪个文件中?
示例
为了解决这个问题,我们需要学习devtool配置项。
devtool
此选项控制是否生成,以及如何生成 source map。source map用来映射打包前的源代码和打包后的目标文件之间的关系,方便我们调试(当代码有错误时,能找到这个错误是在哪个源代码中)。
module.exports ={
devtool: 'source-map',
mode: 'development'
}
devtool 有很20多个值可以选,每个选项都有不同的含义,例如:
-
“source-map”:把映射关系生成在单独的map文件中。
-
“inline-source-map” : 把映射关系保存在打包文件中
建议:
-
在生产阶段可以设置:cheap-module-source-map
-
在开发阶段可以设置:cheap-module-eval-source-map
小结
-
webpack的配置文件默认名是
webpack.config.js
-
学习webpack主要就是学习webpack.config.js的使用。
-
自行定义: entry,output,mode, devtool
如有不足,请多指教,
未完待续,持续更新!
大家一起进步!