1.4.webpack-dev-server
webpack-dev-server is a server we need to use in the development stage, it will package your code into memory, we can have access to the package code into memory by way of http
installation
npm i [email protected] -DModify the startup command package.json
"dev": "webpack-dev-server --env.production --config ./build/webpack.base.js"Increased configuration
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 file is automatically created
In front webpack-dev-server, start the access path that we set dist directory under the project, we need to manually create an index.html file in the dist directory and manually added to the index after js file package. html file, this time, we can see the effect accessed through a browser, in the development, use tools to do the things we try to use tools to help us complete, we can use html-webpack-plugin this plugin to help us do this things, its role is to generate a stencil static document file, and then automatically inserted into the packaged js html file
First, install the plugin
npm i [email protected] -DIncreased configuration
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)
}
}Note that if you want to use to configure the title, the template need to do this to get the title value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>1.6. Automatically clear the last package of documents
When we perform the packaging operation, automatically generate a package file, if the file has been generated previously, we usually files manually before to delete once been generated in order to avoid confusion, this time you can use the clean-webpack-plugin to help us complete this operation
installation
npm i [email protected] -DIncreased configuration
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 file parsing
Css file needs to resolve two loader, css-loader and style-loader, the role of css-loader is resolved css syntax, passed after the completion of the analysis style-loader, style-loader will generate style tags, then put these css code inserted into the html file, so there will be a style of html
npm i [email protected] [email protected] -DIncreased profile configuration items
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)
}
}Note: loader is written in three ways: 1, 2 3 is an array of strings, in front of the object we use string
In fact, in the absence of the loader configuration parameters, multiple loader we prefer the wording of the second, to pass an array loader
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader", "style-loader"]
}
]
},Note: css-loader and style-loader is used to note the order, if configured in the form of a string, css-loader should be placed below, if configured in the form of an array, css-loader to be placed in front of, the order is incorrect will complain
Screw classroom video lessons address: http: //edu.nodeing.com