Webpack 更详细的配置安装说明

webpack 简要说明

什么是 webpack

webpack是前端的一个项目构建工具，它是基于 Node.js开发出来的一个前端工具

为什么要使用 webpack

在些项目中我们经常会引用很多资源，例如 .js .css .img .svg .ejs .vue 等等类型的文件，这样会使浏览器发出很多次请求，导致网页加载速度慢，性能低等弊端

而且当我们引入很多文件之后，还需要处理它们之间的依赖关系，很麻烦，所以，使用 webpack 可以解决各个包直接按的复杂依赖关系，减少二次请求。

借助 webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能，当然也有很多类似这样的工具，例如 Gulp

后续待更新。。。

webpack4 安装须知

安装依赖包

npm i -D webpack webpack-cli webpack-dev-server

webpack-dev-server 工具

安装

npm i -D webpack-dev-server

配置

安装完毕后，由于，我们是在项目中，本地安装的 webpack-dev-server，所以无法把它当作脚本命令，在终端中直接运行（只有那些安装到全局的工具，才能在终端中正常执行）所以需要在 package.json 的scripts属性中添加代码

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

• --open 自动打开浏览器
• --port 3000 端口设置为3000
• --hot 热更新(减少不必要的代码更新，启用浏览器的无刷新重载【对.js文件无效果 对.css文件有效果】)
• --contentBase src 以 src 目录 为根路径 直接打开当前网页(index.html)

注意：webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装 webpack 这个包

文件引入

webpack-dev-server这个工具帮我们打包生成的 bundle.js文件，并没有存放在实际的物理磁盘上，而是直接托管到了电脑的内存中，所以我们在项目的根目录中，根本找不到这个打包好的bundle.js。

我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到我们项目的根目录中，虽然看不到它，但是可以认为和 dis src平级，有一个看不见的文件，叫做 bundle.js

所以文件引入需要以 /为根地址

<script src="/bundle.js"></script>

html-webpack-plugin 插件

为什么要使用 html-webpack-plugin插件？

当使用 html-webpack-plugin之后，我们不再需要手动处理 bundle.js 的引用路径了，因为 这个插件，已经帮我们自动 创建了一个 合适的 script , 并且，引用了 正确的路径

安装

npm i -D html-webpack-plugin

配置

在 webpack-config.js中配置

const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入包
plugins: [ // 在module.exports 中追加属性
    new htmlWebpackPlugin({ // 创建一个在内存中 生成 HTML 的页面插件
        template: path.join(__dirname, './src/index.html'), // 指定模板页面, 会根据指定的模板页面去内存中生成
        filename: 'index.html' // 指定生成的页面名称
    })
]

样式处理（loader）

处理第三方文件类型的过程

1. 发现这个 要处理的文件不是 JS 文件，然后就去 配置文件中查找有没有对应的第三方 loader规则
2. 如果能找到对应的规则， 就会调用 对应的 loader处理 这种文件类型；
3. 在调用 loader的时候，是从后往前调用的；
4. 当最后的一个 loader调用完毕，会把 处理的结果，直接交给 webpack进行 打包合并，最终输出到 bundle.js 中去

CSS

假如我们在 main.js文件导入css文件时 import './css/index.css' 会报错

You may need an appropriate loader to handle this file type. //你需要一个合适的 loader 去处理这个文件类型

注意：webpack默认只能打包处理 JS 类型过的文件，无法处理其他的的非 JS 类型的文件

如果需要处理非 JS 类型的文件，我们需要手动安装一些合适第三方 loader加载器

如果想要打包处理 css文件，需要 npm i style-loader css-loader -D

接着在配置文件（webpack.config.js）中添加以下代码

module: { //这个节点，用于配置所有 第三方加载器
    rules: [ // 所有第三方模块的匹配规则
        {test: /\.css$/, use:['style-loader', 'css-loader'],} // 配置处理 .css 第三方 loader 规则
    ]
}

Less

如果想要打包处理 less文件，需要 npm i less-loader less -D

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器
    rules: [ // 所有第三方模块的匹配规则
        {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 配置处理 less 文件第三方 loader 规则
    ]
}

Sass

如果想要打包处理 less文件，需要 npm i sass-loader node-sass -D

如果 node-sass 无法安装使用 淘宝镜像安装

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器
    rules: [ // 所有第三方模块的匹配规则
        {test: /\.less$/, use: ['style-loader', 'css-loader', 'sass-loader']}, // 配置处理 less 文件第三方 loader 规则
    ]
}

img、字体

如果想要打包处理 img 字体文件，需要 npm i url-loader file-loader -D

如果 node-sass 无法安装使用 淘宝镜像安装

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器
    rules: [ // 所有第三方模块的匹配规则
        {test: /\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader'}, // 处理字体
        {test: /\.(jpg|phg|gif|bmp|jpeg)$/, use: 'url-loader?limit=615312&name=[hash:8]-[name].[ext]'} // 处理图片路径的 loader
    ]
}

参数

• limit给定的值是图片的大小，单位是 byte ，如果引用的图片，大于或者等于给定的 limit值，则不会转换为 base64 格式的字符串，如果小于的话，则会转为 base64 的字符串
• name更改图片名称，[hash:8]-name=[name].[ext] 表示打包之后的图片与原本图片名字相同，每张图片前加 8 位的哈希值

ES6 语法（Babel）

总结一下新的 babel 7.x 结合 webpack 4.x 配置 的正确方法

安装

npm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/preset-env @babel/plugin-proposal-class-properties -D
npm i @babel/runtime  -S

配置

1. 在项目根目录新建一个 .babelrc的文件（json 格式），添加以下代码

{
	"presets": ["@babel/preset-env"],
	"plugins": [
		"@babel/plugin-transform-runtime",
		"@babel/plugin-proposal-class-properties"
	]
}

2. webpack.config.js配置文件中追加

webpack.comfig.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	entry: path.join(__dirname, "./src/main.js"),
	output: {
		path: path.join(__dirname, "./dist"),
		filename: "bundle.js"
	},
	plugins: [
		new htmlWebpackPlugin({
			// 创建一个在内存中 生成 HTML 的页面插件
			template: path.join(__dirname, "./src/index.html"), // 指定模板页面, 会根据指定的模板页面去内存中生成
			filename: "index.html" // 指定生成的页面名称
		})
	],
	// presets: ["@babel/env"]
	module: {
		//这个节点，用于配置所有 第三方加载器
		rules: [
			// 所有第三方模块的匹配规则
			{
				test: /\.(jpg|phg|gif|bmp|jpeg)$/,
				use: "url-loader?limit=615312&name=[hash:8]-[name].[ext]"
			}, //
			{
				test: /\.(eot|ttf|svg|woff|woff2)$/,  // 处理字体
				use: "url-loader"
			},
			{
				test: /\.css$/, // 配置处理 .css 第三方 loader 规则
				use: ["style-loader", "css-loader"] 
			}, 
			{
				test: /\.less$/, // 配置处理 less 文件第三方 loader 规则
				use: ["style-loader", "css-loader", "less-loader"] 
			}, 
			{
				test: /\.sass$/, // 配置处理 sass 文件第三方 loader 规则
				use: ["style-loader", "css-loader", "sass-loader"] 
			}, 
			{
				test: /\.js$/,
				use: "babel-loader",
				exclude: /node_modules/
			}
		]
	}
};