前端与移动开发----webpack----webpack配置文件

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

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！