webpack基础篇（一）：初识（概念、html-webpack-plugin、清理dist、source-map、webpack-dev-server）
目录
-
- 一. 安装webapck
- 二. 自定义webpack配置
- 三. 自动引入资源
- 四. 清理dist
- 五. mode选项
- 六. SourceMap
- 七. watch mode
- 八. webpack-dev-server
一. 安装webapck
在项目中建议将webpack安装至当前项目而不是全局，这样避免你的小伙伴没有安装或者安装了其他版本的webapck
- 新建项目
webpack-test，生成package.json文件
npm init -y
- 安装webpack
npm i webpack webpack-cli -D
- 检查
webpack安装版本
webpack -v
- 测试一下
webpack-test项目中新建src，src中新建math.js、index.js
// math.js
export function add (x, y) {
return x + y
}
export function reduce (x, y) {
return x - y
}
// index.js
import { add, reduce } from './math.js'
const result1 = add(11, 22)
const result2 = reduce(11, 22)
console.log(result1);
console.log(result2);
执行命令 webapck，它会默认找./src/index.js作为入口文件
你可以看到已经打包出一个dist/main.js
二. 自定义webpack配置
执行webpack --help可以看到webapck有很多命令可以使用，比如刚才执行的webpack你可以使用这样一个命令行得到相同结果，当然你要先删除dist
webpack --entry ./src/index.js --mode production
也会得到dist/main.js打包产物
但是这样使用命令行不方便、不直观也不能保存一些其他配置
我们可以使用webpack configuration进行配置
- 新建
webpack.config.js
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js', // 入口文件
// 出口配置
output: {
filename: 'bundle.js', // 出口文件名
// 绝对路径
path: path.resolve(__dirname, './dist') // path.resolve(__dirname) 表示获取当前文件的物理路径，即绝对路径
},
mode: 'none' // 打包模式
}
- 执行
webpack会默认找到webpack.config.js配置。可以看到会打包出dist/bundle.js，并且内容与dist/main.js内容并不一致，而且dist/main.js还存在。我们稍后说这两个问题。 - 在项目根目录下新建
index.html，并加载dist/bundle.js，使用编辑器内置的server或者直接在浏览器加载index.html可以在控制台看到打印结果33-11，表明webpack打包成功。
三. 自动引入资源
html-webpack-plugin
- 上面我们手动写了
index.html加载dist/bundle.js，那如何自动生成index.html并引入打包资源呢？ - 让该插件为我们生成一个 HTML 文件
npm install --save-dev html-webpack-plugin
在webpack.config.js引入并在plugins中实例化它
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin()
]
}
-
执行
webpack，可以看到dist/index.html，在浏览器打开控制台中可以看到可以正常打印结果33-11。但是目前这个文件和我们前面建的index.html还没有什么关联。那我们可以让他们关联起来，或者说通过配置让HtmlWebpackPlugin基于我们的index.html生成文件 -
配置
html-webpack-pluginoption
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 模板
filename: 'index.html', // 文件名称
inject: 'body' // 定义生成的script所在的位置
})
]
}
- 修改
index.html
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack-自动引入资源-HtmlWebpackPlugintitle>
head>
<body>
<h1>Hello worldh1>
body>
html>
- 执行
webpack，可以看到dist/index.html生成了，并且内容也是我们想要的，在浏览器打开可以正常打印结果33-11
四. 清理dist
我们执行webpack后发现我们之前生成的一些文件还在，但事实上我们并不需要他们了，那我们该怎么在生成新的dist前清除掉旧的打包资源呢
只需要简单的配置即可。在output中配置clean: true即可
// webpack.config.js
module.exports = {
output: {
clean: true, // 在生成文件之前清空 output 目录
}
}
执行webpack，可以看到打包后只有index.html和bundle.js，旧文件已经被清除了，index.html访问也是正常的
五. mode选项
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
// webpack.config.js
module.exports = {
mode: 'production',
};
六. SourceMap
SourceMap能帮助我们在浏览器中调试时看到源码，以帮助我们精准的定位问题代码位置，你只需要在webpack.config.js配置devtool: 'inline-source-map'即可开启
七. watch mode
watch监听文件变化，当它们修改后会重新编译
webpack-dev-server 和webapck --watch的区别
webpack --wacth
或者
// webpack.config.js
module.exports = {
// ...
watch: true,
};
八. webpack-dev-server
watch 的唯一的缺点是，为了看到修改后的实际效果，我们需要刷新浏览器。如果能够自动刷新浏览器就更好了，因此接下来我们会尝试通过 webpack-dev-server 实现此功能。
npm install --save-dev webpack-dev-server
webpack-dev-server 为我们提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。
// webpack.config.js
module.exports = {
devServer: {
static: './dist',
port: 9000, // 定义端口
open: true // 自动打开浏览器
},
};
以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:9000 下。
打开控制台可以看到
Hot Module Replacement热模块更新替换生效了
Live Reloading实时更新生效了
即热更新生效了
Warning
webpack-dev-server在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一
这样会提高我们的开发效率，也会提高webpack的编译效率
源码地址：https://gitee.com/yanhuakang/webpack-test
如果有用，就点个赞吧(*^▽^*)