Webpack 基础使用练习：快速利用场景巩固概念

本篇文章着重来强化对webpack概念的了解，同时提供一些特定的场景来告诉大家应该什么时候使用什么配置来解决什么问题，好的，废话不多说，我们开始啦！

基础安装

npm install -D webpack webpack-cli

初始文件

module.exports = {mode: "development", // 开发模式
}

现在假设我们的业务代码都在/src文件夹下，我们想要生成的文件在/dist文件夹下，那么我们的初始配置就应该如下：

const path = require('path')
module.exports = {mode: 'development',entry: {bundle: path.resolve(__dirname, '/src/index.js')},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash].js'}
}

值得注意的是，在我们多次build的时候，由于[contenthash]每次的值都不同，所以我们每次build的时候都会生成一个文件，这显然不是我们所希望的。因此我们可以为output添加clean: true，这样可以在我们每次build的时候总保留最新的，之前的文件都会被清除。当然你也可以选择不使用相关的hash值来标识你的文件，不过我还是不太建议这样。

常规使用

常规使用就给大家针对三方面来说，是loader、plugin()和devServer(开发服务器)

loader

假如我们在项目中使用了sass，我们如果不做任何多的配置，当我们在build的时候，会报错显示没有加载器解析.sass文件，那么我们就需要手动在webpack.config.js中进行配置加载器(loader)：

还是先安装所需加载器：

npm install -D style-loader css-loader sass-loader

然后我们在webpack中进行配置(多余的配置就不再写一次了)：

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

像js一类的(ts、jsx、tsx等)，我们可以使用babel-lodaer或者最近非常火的swc-loader请自行查阅，在这里就不过多赘述了。

这里给大家补充一个图片类loader的一个例子，我们不能只是去优化加载我们的代码部分，要知道静态资源类的内容优化也是我们评估一个项目优化的重要指标：

首先我们假设静态资源的位置在/src/assets文件夹下，那么我们要在output中指定一个特定的属性——assetModuleFilename：

module.exports = {// ...output: {// ...assetModuleFilename: '[name][ext]'}// ...
}

然后我们可以去选择我们支持加载的图片类型和去指定插件：

module.exports = {rules: [{test: /\.(png|svg|jpg|gif)$/i,type: 'asset/resource' // 打包文件返回相应的url}]
}

插件

html-webpack-plugin

这个插件算得上是webpack中最基础的插件，他的作用是在你指定的输出目录中生成index.html模版，下面让我们来用它来举个例子，让大家快速了解插件的用法：

首先还是先安装一下插件：

npm i -D html-webpack-plugin

然后我们在webpack.config.js中进行使用(省略部分与此无关代码)：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// ...plugins: [new HtmlWebpackPlugin({title: 'Webpack App',filename: 'index.html',})]
}

这段代码的含义是：生成的文件名为index.html，标题为Webpack App，但是这样bulid的话我们会发现在基础模版中，也就是我``/dist/index.html中的内容是非常少的，并且我们在修改了/dist/index.html中的内容后再重新进行bulid的时候，我们修改的内容会自动被删除，很显然这在许多开发场景中是不可接受的，所以我们可以使用它的template`属性：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// ...plugins: [new HtmlWebpackPlugin({title: 'Webpack App',filename: 'index.html',template: '/src/index.html'})]
}

然后我们在/src/index.html中写的基础内容在我们build之后就会被映射到/dist/index.html中，值得一提的是，在我们的模版(template)html中，我们需要在标题处做一点小变化：

<title><%= htmlWebpackPlugin.options.title %>
</title>

这样我们就可以指定我们的标题使用webpack配置中预先设置好的标题。

假如我们需要配置一些meta标签或者需要在body里添加特定的内容时，在/src/index.html中书写好后，都可以在build后被保存在/dist/index.html中，这也是这个插件的主要作用…

开发服务器

开发服务器通常会在我们开发中帮助我们来高效的调试和分析，在一些框架中往往都是预先设定好了，那么我们如何手动高效的配置一个简单的开发服务器呢？

首先我们找到package.json，在"scripts"中添加命令：

"scripts": {"dev": "webpack serve"
}

当我们执行指令后，默认开启的地址为本机的8080端口，当然我们也可以进行一些其他的自定义配置，仍然是在webpack.config.js中进行：

module.exports = {devServer: {static: {directory: path.resolve(__dirname, 'dist')},port: 3000,open: true,hot: true,compress: true,historyApiFallbacl: true}
}

在上述代码中，我们制定了开发服务器静态文件的根目录为/dist文件夹，设置了监听的端口号为3000，设置服务器启动后自动开启默认浏览器打开该地址(在这里指的是localhost:3000)，开启了热模块替换(HMR)，启用Gzip压缩文件来减少加载时间，开启了路径校验(支持使用H5的SPA应用，在找不到对应的路径时会自动将页面重定向到index.html，避免404错误)

我们由一个具体的场景来引入接下来的配置：

我们现在还在本地开发阶段，但是团队中的后端佬已经遥遥领先了，已经将代码上传到服务器上面了，他并没有设置一系列的请求头来允许跨域，那我们在请求接口数据的时候就会因为跨域而无法请求到数据

我们可以使用开发服务器的配置来适当的解决跨域的问题：

module.exports = {devServer: {proxy: {'/api': {target: 'http://qwe.com', // 代理的目标服务器changeOrigin: true,       // 修改请求的来源为目标服务器，解决跨域问题pathRewrite: { '^/api': '/api' }  // 保持api路径不变}}}
}

在我们本地进行的前后端项目时也可能会遇到跨域的问题，我们仍然可以采用代理的方式来转发请求，与上面同理：

module.exports = {devServer: {proxy: {'/users': {target: 'http://localhost:5000',pathRewrite: { '^/users': '' },changeOrigin: true},'/orders': {target: 'http://localhost:5001', // 另一个服务器pathRewrite: { '^/orders': '' },changeOrigin: true}}}
}