1、Webpack 是什么？
直接上图
简言之：webpack可以做如下的事情
- 打包所有的脚本
- 打包所有的图片
- 打包所有的样式
一句话：打包所有的资源
2、webpack 之安装
2.1 webpack安装环境依赖
webpack是基于Node的， 在安装Webpack之前需要安装Node环境, 这里就不赘述了。安装成功后打开CMD控制台，输入如下命令验证是否安装成功
在这里安利一个node版本管理插件 nvm, 可以实现本地多个node 版本自由转换
创建你的项目目录, 在当前目录下执行 npm init, 初始化项目目录环境，生成 package.json
package.json里存放着当前项目的相关信息，包含 版本号，开发者，开发环境依赖，生产环境依赖，在这里我们重点关注 scripts， webpack构建命令在这里配置。
2.2 安装webpack
执行 npm install webpack webpack-cli -D ， 其中 -D 也就是 --save-dev, 如果是要作为生产环境的依赖则是 --save 即可
安装成功后， 在 package.json 文件 会保存对应的安装信息
2.3 如何使用webpack构建呢？
笔者当前使用的是 webpack4.0+, 在 webpack 4 中，可以无须任何配置使用也就是 0配置，然而大多数项目会需要很复杂的设置，所以 webpack 仍然支持使用配置文件的方式。
首先在项目目录下创建 src 目录，然后创建 index.js， webpack4 构建的默认入口文件 src/index.js
2.3.1 构建方式一： 0配置构建
此时，就可以发挥webpack的构建效果啦。 执行 npx webpack， 构建成功后会在项目目录下自动生成一个dist目录，同时生成构建后的js文件：
main.js, 默认名字，不用担心，这个是可以修改的哟。
科普时间：
1. npm 5.2.0 版本中内置了伴生命令：npx，类似于 npm 简化了项目开发中的依赖安装与管理
2. npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，
就会帮你安装, 这里的PATH 就是项目 node_modules
3.如果npm版本较低，可以全局安装 npm install -g npx
复制代码至此你已经学会如何使用 webpack 这门武林秘籍啦。那我们在浏览器中看看效果吧。我们在dist目录手动创建一个index.html, 同时引入 main.js
通过查看构建后的main.js文件，可以看到是压缩后的代码，这是因为 webpack 提供了不同的打包
mode
npx webpack --mode production //构建用于发布的代码, 代码会压缩
npx webpacck --mode development //开发过程中构建代码, 代码不压缩
复制代码2.3.2 构建方式二 使用 webpack.config.js
在项目根目录下创建 webpack.config.js, 前面提到过 webpack 是基于 node环境的， 所以同样采用的是 Commonjs 包管理规范。
module.exports = {
entry: '', //打包入口文件,
output: {}, //打包出口文件,
plugins: [], //配置插件
module: {
rules: [] //配置各种用于源文件编译加载的loader
},
devServer: {} //配置开发静态http服务
}
复制代码如下配置，执行 npx webpack --mode development, 同样也可以构建成功
let path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
复制代码构建后会生成如图文件
如果想保持和源文件相同的名字则可以这样配置 '[name].js', 如果要加上hash值，则 '[name].[hash].js'
let path = require('path');
module.exports = {
entry: {
index: './src/index.js
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
}
复制代码2.3.3 html 文件之构建
上面在验证构建后js是采用的手动方式去创建 html， 并手动引入，如果webpack这么弱，那也太弱了吧。哈哈哈...
那该怎么解决这个问题呢？下面我们就要用到插件: html-webpack-plugin, 首先得安装这个插件
npm i html-webpack-plugin， 可以去npm官网看看其用法。
引入并调用该插件。执行npx webpack命令。则会帮你在dist目录，自动创建相应的html和js， 并自动引用相应的静态资源文件.
再说说
new HtmlWebpackPlugin({
filename: 'a.html', //构建后生成的文件的名字
chunks: ['index'], //构建时所用到的js源文件， 与 entry 中的 key 一一对应
template: './src/index.html', //所用到的html源文件，主要是考虑到一个项目中可能有多个html文件
hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值，类似get请求中加上时间戳
}),
复制代码2.3.4 css 文件之构建
* 安装插件 npm i extract-text-webpack-plugin@next -D
* 安装相应的css loader : npm i style-loader css-loader -D
* 在index.js中文件引入 index.css 文件
* 在webpack.config.js中引入插件
复制代码style 标签载入 css文件
plugins: [
cssExtract,
new HtmlWebpackPlugin()
],
module: {
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
复制代码以link方式载入css文件，也就是抽离css文件
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
}]
})
}
复制代码css 文件的处理就到这里，其他css文件，比如 less-loader, sass-loader, 后面作一个专题再展开讨论
优化css加载插件 npm i purifycss-webpack purify-css -D
2.3.5 图片处理
html文件中引入img 标签， 这里需要用到 html-withimg-loader
npm i html-withimg-loader -D
复制代码 {
test: /\.(png|gif|jpg)$/,
use: [{
loader: 'url-loader'
}]
},
{
test: /\.html/,
// 处理html中的图片loader
use: 'html-withimg-loader'
}
复制代码构建后dist目录下的 html 中的 img标签
<img src="data:image/png;base64,...'/>
复制代码当然大多数情况下，会选择将引用的图片构建在 dist/images 目录中，此时只需将上述配置稍加修改即可
{
test: /\.(png|gif|jpg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 5, //
outputPath: 'images/' //构建后的目标目录
}
}]
},
{
test: /\.html/,
// 处理html中的图片loader
use: 'html-withimg-loader'
}
复制代码区分下 url-loader 和 file-loader的差别
The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
复制代码示例说明： 在src/index.css中有如下代码
div{ background: url(1.png) }
复制代码如果将 limit 设置为 0 时， 构建后 dist/index.css 代码为:
div{ background: url(data:image/png;base64,....) }
复制代码当limit不为0时， url-loader 和 file-loader 作用一样
--------------------------------华丽的分割线--------------------------------------
看到这里，webpack的最常用的几种用法都已介绍完成。在实际开发过程中，为了提高效率。最好在真正开发前配置好这些。
2.3.6 本地静态服务，自动刷新。
先安装npm i webpack-dev-server -D，同时在webpack.config.js中配置：
devServer: {
contentBase: './dist',
host: 'localhost',
port: 4000,
open: true,
hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
}
复制代码执行 npx webpack-dev-server, 即可看到浏览器自动打开，并加装构建后的html文件。
-
那如何才能真正地自动构建，自动刷新，解放双手呢？ webpack 内置插件 HotModuleReplacementPlugin
new webpack.HotModuleReplacementPlugin() -
删除构建的历史文件，可以使用 插件
clean-webpack-plugin
2.4 小结
webpack 常见的基本用法如文中所述。在下一章中将带小伙伴们进一步探讨webpack高级应用。欢迎拍砖~~~