webpack入门进阶（2）
1.4.webpack-dev-server
webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存，我们可以通过http的方式访问到打包到内存的代码
安装
npm i webpack-dev-server@3.8.1 -D
修改package.json的启动命令
"dev": "webpack-dev-server --env.production --config ./build/webpack.base.js"
增加相关配置
webpack.dev.js
const path = require("path")
module.exports = {
mode: "development",
devServer: {
// 默认访问的根路径，webpack-dev-server会去这个路径下找到index.html文件并返回
contentBase: path.join(__dirname, "../dist"),
// 开启gzip压缩，增加文件返回速度
compress: true,
port: 8000,
// 启动后自动打开浏览器
open:true
}
}
1.5.自动创建html文件
在前面webpack-dev-server中，我们设置的启动访问路径是项目下的dist目录，我们需要在这个dist目录下手动去创建一个index.html文件，并且将打包后的js文件手动添加到index.html文件中，这个时候，我们通过浏览器访问才能看到效果,在开发中，能用工具做的事情我们尽量用工具帮我们完成，我们可以使用 html-webpack-plugin 这个插件来帮我们做这件事情，它的作用就是根据模版文件生成一个静态文件，然后自动将打包好的js插入到这个 html文件中
首先，安装这个插件
npm i html-webpack-plugin@3.2.0 -D
增加相关配置
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
plugins: [
new htmlWebpackPlugin({
// 设置标题
title: "螺钉课堂",
// 设置模版路径
template: path.resolve(__dirname, "../public/index.html"),
// 设置打包的文件名
filename: "index.html",
// 最小输出配置
minify: {
// 折叠空格
collapseWhitespace: true
}
})
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
注意，如果要使用配置中的title，模版中需要使用这种方式来获取title值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
1.6.自动清除上次打包的文件
当我们执行打包操作，自动生成一个打包文件，如果前面有已经生成的文件，我们通常会手动去删除前一次已经生成的文件，以避免产生混乱，这个时候可以使用clean-webpack-plugin来帮我们完成这个操作
安装
npm i clean-webpack-plugin@3.0.0 -D
增加相关配置
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
plugins: [
new htmlWebpackPlugin({
title: "螺钉课堂",
template: path.resolve(__dirname, "../public/index.html"),
filename: "index.html",
minify: {
collapseWhitespace: true
}
}),
// 每次打包之前，先清除dist目录下的文件
new CleanWebpackPlugin()
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
1.7.解析css文件
解析css文件需要两个loader，css-loader和style-loader，css-loader的作用就是解析css的语法，解析完成后传给style-loader， style-loader就会生成style标签，然后把这些css代码插入到html文件中，这样在html就会有样式了
npm i css-loader@3.2.0 style-loader@1.0.0 -D
配置文件中增加配置项目
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
// 每个文件都称为模块，module就是用来配置解析各种文件模块的，module里面主要涉及到几个问题，1 哪些模块文件需要被转换？ 2 用什么loader去转？ 3 用什么规则去转？
module: {
rules: [
{
test: /\.css$/,
use: "style-loader"
},
{
test: /\.css$/,
use: "css-loader"
}
]
},
plugins: [
new htmlWebpackPlugin({
title: "螺钉课堂",
template: path.resolve(__dirname, "../public/index.html"),
filename: "index.html",
minify: {
collapseWhitespace: true
}
}),
// 每次打包之前，先清除dist目录下的文件
new CleanWebpackPlugin()
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
注意： loader的写法有三种： 1、字符串 2 数组 3、对象 前面我们使用的就是字符串的形式
实际上，在没有对loader进行参数配置的时候，多个loader 我们更倾向于第二种写法,给loader传一个数组
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader", "style-loader"]
}
]
},
注意： css-loader和style-loader是需要注意使用顺序的，如果配置成字符串的形式，css-loader要放在下面，如果配置成数组的形式，css-loader要放在前面，顺序不正确会报错
螺钉课堂视频课程地址：http://edu.nodeing.com
