Webpack的基本使用 源于黑马

Webpack的作用

概念：webpack是前端项目工程化的具体解决方案。

主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器兼容性、性能优化等强大功能

好处：提高项目开发效率和可维护性

注意：目前Vue,React等前端项目，基本上都是基于webpack进行工程化开发

Webpack安装

npm install webpack webpack-cli --save-dev

-S 是 --save的简写，写入dependencies 只用于开发阶段
-d 是 --save-dev的简写，写入devDependencies

在项目中配置webpack

1. 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下:

// mode 用来指定构建模式，可选 development(开发) 和 production(发布)
module.exports = {
   mode: 'development '  //production进行压缩混淆，打包慢，体积小
}

2. 在package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts ": {
	"dev": "webpack" //scripts  节点下的脚本，可以通过npm run 执行。列如 npm run dev
}

3. 在终端中运行npm run dev 命令，启动 webpack 进行项目的打包构建 ，将自动生成一个dist文件

Webpack更多细节

1. webpack的4.x和5.x版本中默认约定:
   打包的入口文件为 src -> index.js
   打包的输出文件为 dist -> main.js
2. 修改默认配置

//在webpack.config.js配置文件中
const path = require('path') //导入node.js中专门操作路劲的模块
module.exports = {
    mode: 'development',	//mode 用来指定构建模式
    //entry入口文件,指定要处理哪个文件, __dirname指文件的根目录
    entry: path.join(__dirname, './src/index.js'), 
    output: {
        path: path.join(__dirname, './dist'),   //输出文件的路径
        filename: "build.js"    //生成文件的名称
    }
}

配置webpack的自动打包功能

1. 运行npm install webpack-dev-server -D 命令, 安装支持项目自动打包的工具
2. 修改 package.json -> scripts中的dev命令

"script": {
	"dev": "webpack-dev-server"
}

3. 将src->index.html中, script脚本的引用路径, 修改为’/build.js’
4. 运行 npm run命令, 更新进行打包

配置html-webpack-plugin生成预览页面

1. 运行 npm install html-webpack-plugin -D 命令, 安装生成预览页面的插件
2. 修改webpack-config.js文件，添加如下配置信息
   
3. 解惑 html-webpack-plugin
   
4. devServer 节点对webpack-dev-server插件进行更多的配置

   devServer: {
   	open: true, //初次打包完成后，自动打开浏览器
   	host: '127.0.0.1', //实时打包所使用的主机地址
   	port: 80, // 实时打包使用的端口号
   }
   

   注意：修改了webpack-config.js或package.json配置文件，必须重启实时打包的服务器

webpack中的loader

webpack默认只能打包处理以.js后缀名结尾的模块
loader 加载器的作用：协助 webpack打包处理特定的文件模块

1. loader加载器的使用
   1. less-loader 可以打包处理 .less 相关的文件
   2. sass-loader 可以打包处理 .scss 相关的文件
   3. url-loader 可以打包处理css中与url路径相关的文件
2. 打包处理css文件
   1. 运行npm i style-loader css-loader -D命令, 安装处理css文件的loader
   2. 在webpack.config.js的module->rules数组中, 添加loader规则如下

   module: {
   	rules: [
   		{test: /\.css$/, use: ['style-loader', 'css-loader']}
   	]
   }
   

   3. 注意
      1. test表示匹配的文件类型, use表示对应要调用的loader
      2. use数组中自定的loader顺序是固定的
      3. 多个loader的调用顺序的从后往前调用
3. 打包处理less文件
   1. 运行 npm i less-loader less -D 命令
   2. 在webpack.config.js的module -> rules数组中, 添加loader规则如下

module: {
	rules: [
		{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
	]
}

4. 打包样式表中的图片
   
5. 打包处理js文件中的高级语法
   
   
6. 配置 webpack 的打包发布
   
   如果觉得打包的文件很乱，可以将把JS文件统一生成到js目录中
   
   把图片文件统一生成到image目录中，这里不做演示
7. 打包发布时自动清理dist 目录下的旧文件
   可以安装并配置clean-webpack-plugin，不做演示

什么是 Source Map

开发环境下默认生成的Source Map，记录的是生成后的代码位置。导致运行报错的行数与源代码的行数不一致。

在发布时要关闭Source Map,以免暴露源代码，在生产环境下，只定位行数不暴露源码。可将devtool设置成
nosources-source-map。

Source Map最佳实践