适合新手的 webpack 详细配置

---

前言

我相信很多想学习 webpack 的童靴，一定都进过它的官网(webpack 中文官方文档），也有一定的了解 webpack 相关的知识啦，我在这里就不多说了。估计很多同学和我一样，看了官网的东西还是云里雾里，这 webpack 到底怎么用呢？什么时候该用什么呢？，本文就来说说，对于新手而言的 webpack 基础配置。

---

配置参数说明

entry：资源入口文件，所有的资源最后会打包成一个 JS 文件。

output：打包之后存放的文件路径。path 为相对路径，filename 为打包后的文件名。

loader：webpack 本身只能打包 js 文件，使用 loader 来处理 js 以外的文件。

plugins：插件，提供代码压缩，生成 html ，自动清除打包后的文件等一系列功能。

mode：webpack 对应的模式，分为development 和 production。

安装 webpack

注意：首先需要保证你的 node 是10 以上的版本

npm i webpack webpack-cli -g    //全局安装

此外，还需要在项目中再安装一次，同以上代码，不要最后的全局安装(-g)。

打包 less 资源

我们知道 webpack 只能处理 js 文件，js 以外的不能够处理，这个时候，我们就需要 loader。

npm i css-loader less-loader style-loader less

webpack.config.js 中配置，在 rules 数组中添加一个对象：

{
	test:/\.less$/,  //配置所有的 less 文件
	use:[
	  'style-loader',   //用于在 html 文件中创建一个 style 标签，将样式放进去
	  'css-loader',     //将 less 编译后的 css 转换成为一个模块
	  'less-loader',     //将 less 编译城 css ，但不生成单独的 css 文件，放在内存中
      ] //此数组有顺序要求，不可随意改变此顺序
}

js语法转换

将浏览器不能识别的新语法转换为可以识别的旧语法，做浏览器的兼容性处理。

npm i babel-loader @babel/core @balel/preset-env

webpack.config.js 中配置，在 rules 数组中添加一个对象：

{
	test:/\.js$/,
	exclude:/node_modules/,
	use:[
	 loader:"babel-loader",
	 option:{
	 	presets:['@babel/preset-env']
	 }
}

打包样式文件中的图片资源

npm i file-loader url-loader

webpack.config.js 中配置，在 rules 数组中添加一个对象：

{
	test:/\.(png|jpg|gif)$/,
	use:[
	 loader:"file-loader",
	 option:{
	 	publicPath:'../dist/images',  //图片打包后的url路径
	 	outputPath:'images',  //图片本地输出路径
	 	name:'[hash:5].[ext]',  //修改文件名称 [hash:5] hash值取5位 [ext] 文件扩展名
	 }
}

打包 html 文件

html 文件 webpack 不能解析，需要借助插件。

npm i htmt-webpack-plugin

plugin 的配置方法与 loader 不同，首先需要引入插件：

const HtmlWebpackPlugin = require("html-webpack-plugin")

webpack.config.js 中配置，在 plugins 数组中添加：

new HtmlWebpackPlugin({
	template:'./src/index.html', //以当前文件为模板创建的 html 
}),

打包 html 中图片资源

在 html 中的图片使用 url-loader 不能处理，他只能处理 js 中引入的图片，所以这里需要引入 html-loader 处理。

npm i html-loader

webpack.config.js 中配置，在 rules 数组中添加一个对象：

{
	test:/\.(html)$/,  //配置所有的 less 文件
	use:[
	  loader:'html-loader',
      ] 
}

自动编译打包运行

npm i webpack-dev-server

修改 webpack 配置对象（注意：与 loader 同级）

devServer:{
	open:true,  //自动打开浏览器
	compress: true,  //启动 gzip 压缩
	port:3000, //端口号
}

提醒：这里需要修改上述的 url-loader 部分配置

publicPath:'images/',

还需要修改 package.json 中 script 指令

"start":"webpack-dev-server",   //项目运行指令 npm run start

总结

以上是基于在开发环境中一些 webpack 基础的配置，还有很多的有意思的 loader 和 plugin 配置，可以参见 webpack 官网。
下一次会总结一些在生产环境中的 webpack 的相关配置。