共计 3156 个字符，预计需要花费 8 分钟才能阅读完成。
引入 Webpack 管理工具的原因
项目打包上线的时候，需要我们将 ES6 语法转化成 ES5 语法，scss 语法转化成浏览器能识别的 css 文件，jQuery 语法转化成为 js 文件，vue 文件转化成 js 文件，将各种开发环境的文件压缩成压缩文件，提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack 好处，当 css 语法前有为了兼容的前缀你记不住，webpack 打包上线的时候会自动帮你添加前缀。
安装 Webpack
建议项目安装，由于 webpack 不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。步骤如下：
1. 安装 node，全局安装即可
2. 进入项目
3.npm init 生成 package.json 文件
4.npm install webpack webpack-cli –save dev（使用 4 以上版本才装 cli）
5. 如果是 mac 版本，应该在命令前面添加 sudo
6.webpack -v
7. 安装完成之后，很多需要的包会在 node_modules 包管理工具中，此时再用 webpack - v 查看 webpack 版本号就不好使了，因为此时 webpack 在项目中的 node_modules 文件夹中。全局查看版本找不到。
建立 webpack.config.js 文件
有关 webpack 配置的文件都需要在这里面填写
const path=require(“path”);
module.exports={
mode:’production’,// 生产环境下
mode:’development’,// 开发环境下
entry:{// 入口配置文件
XX:’./src/index.js’
},
output:{// 出口配置文件
path:path.resolve(__dirname,’./dist’)
//path 下有很多方法
filename:'[name].js’// 文件的名字
}
module:{}// 模块解读 css，图片如何压缩
plugins：[],// 插件用于生产模板和各项功能
devSever:{}// 配置 webpack 开发服务功能
}
在 package.json 文件下配置我们的命令
“scripts”:{
‘build’:’webpack’,
}
运行命令的时候，写的是 build 就是 npm run build
创建 webpack 热服务
1. 安装 webpack-dev-server，安装完成之后在 package.json 中找到 devDependencies 查看是否有 webpack-dev-server 的版本号。
2. 在 webpack.config.js 文件中配置
// 配置 webpack 开发服务功能
devServer:{
contentBase:path.resolve(__dirname,’./dist’),
// 设置基本目录结构
host:’127.0.0.1′,
// 服务器的 IP 地址，也可以写 localhost
port:8081,
compress:true// 服务器压缩是否开启
open:true// 自动打开页面
hot:true
// 实时局部刷新
}
3.packjson 文件中配置
“scripts”:{
‘build’:’webpack’,
‘dev’:’webpack-dev-server’
}
4. 创建热更新最后要引入插件
在 webpack.config.js 文件中配置
plugins[
new webpack.HotModuleReplacementPlugin()
]
HTML 打包
1. 安装插件
npm install html-webpack-plugin –save dev
npm 安装完成之后相当于被安装到了 node_modules 中，所以在使用时，应当将其引入到 webpack.config.js 文件中
const HtmlWebpackPlugin=require(“html-webpack-plugin”);
plugins[
new webpack.HotModuleReplacementPlugin(),
new webpack.HtmlWebpackPlugin({
minify:{
removeAttributeQuotes:true
// 去掉属性的双引号
collapseWhitespace: true
// 折叠空白区域
},
hash:true,
// 为了 js 中有缓存效果
template:’./src/index.html’
// 要打包的 html 模板和路径名称
})
]
多页面应用打包
SPA 单页面应用
当每个 html 文件对应不同的 js 文件的时候，可以在 webpack.config.js 文件中，配置 new webpack.HtmlWebpackPlugin 中添加
{
filename:’b.html’
chunks：[‘index’]
// 对应的 js 文件名称
title:’index-title’
// 修改 html 文件的 title
}
CSS 打包
1. 在入口 js 文件中 import css from ‘./css/index.css’
2. 下载插件：
style-loader: 用来处理 css 文件中的 url，将 url 挂载到 js 文件中
css-loader: 用来将 css 插入到页面的 style 标签中
npm install –save-dev style-loader
npm install –save-dev css-loader
3. 在 webpack.config.js 文件中配置
module:{
rules:[
{
test:/\.css$/,
// 过滤文件以.css 结尾的文件 use:[‘style-loader’,’css-loader’]
// 利用 style-loader 和 css-loader 来解析文件
}
]
}
CSS 文件打包时和 js 文件分离
有时我们不希望打包后的文件 js 和 css 在一个文件里，所以将其分离
1. 引用插件
在 webpack.config.js 文件中引入
const ExtractTextPlugin=require(“extract-text-webpack-plugin”)
2. 安装 npm install –save-dev extract-text-webpack-plugin@next
以最新版本安装
3. 配置
module:{
rules:[
{
test:/\.css$/,
// 过滤文件以.css 结尾的文件 use:ExtractTextPlugin.extract({
fallback:’style-loader’,
use:’css-loader’
})
// 利用 style-loader 和 css-loader 来解析文件
}
]
}
plugins[
new ExtractTextPlugin(“css/index.css”)
]
css 文件会自动关联 html 中
将 CSS 中的图片打包
1. 安装 npm install –save-dev file-loader url-loader
2. 配置
module:{
rules:[
{
test:/\.css$/,
// 过滤文件以.css 结尾的文件 use:[‘style-loader’,’css-loader’]
// 利用 style-loader 和 css-loader 来解析文件
},
{
test：/\.(png|jpg|gif)/,
// test:/\.(png|jpg|gif)/ 是匹配文件的后缀
use:[{
loader:’url-loader’,
// 指定 loader 的配置参数
options:{
limit:500,
outputPath：’images/’
}
}]
}
]
}
html 中的图片打包
https://github.com/wzsxyz/html-withimg-loader
module:{
rules:[
{
test:/\.(htm|html)$/i
loader:’html-withimg-loader’
}
]
}