接着基础环境工程继续添加：
- 1、在项目根目录创建：index.html
- 2、添加web服务
- 2-1 添加web服务是为了dev调试方便，启动一个静态服务，执行命令：
yarn add webpack-dev-server -D - 2-2、在package.json中配置dev模式
"scripts": { "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server" }, - 2-3、在webpack.config.js中添加webpack-dev-server
// 开发服务的配置 devServer: { // 端口，默认8080 port: '8099', // 进度条 progress: true, // 启动后访问目录，默认是项目根目录，这个设置到打包后目录 contentBase: './build', // 启动压缩 compress: true },
- 2-1 添加web服务是为了dev调试方便，启动一个静态服务，执行命令：
- 3、html-webpack-plugin插件
- 3-1、执行命令
yarn add html-webpack-plugin -D
// html-webpack-plugins 插件 let HtmlWebpackPlugins = require('html-webpack-plugin'); ... // 插件配置 plugins: [ new HtmlWebpackPlugins({ // 模板位置 template: 'index.html', // 文件名 filename: 'index.html', // 生产开启，压缩代码 minify: { // 删除html双引号 removeAttributeQuotes: true, // 压缩成一行 collapseWhitespace: true }, // 文件哈希 hash: true }) ] ... - 3-1、执行命令
- 4、webpack.config.js 完整配置
// webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
// webpack相关配置
module.exports = {
// 开发服务的配置
devServer: {
// 端口，默认8080
port: '8099',
// 进度条
progress: true,
// 启动后访问目录，默认是项目根目录，这个设置到打包后目录
contentBase: './build',
// 启动压缩
compress: true
},
// 模式，2种：生产模式(production)和开发模式(development)
// 开发模式不压缩打包后代码，生产模式压缩打包后代码
mode: 'development',
// 入口,表示从哪里开始打包
entry: './src/index.js',
// 表示出口(输出后文件相关配置)
output: {
// 打包后的文件名,产生哈希
//filename: 'bundle.[hash].js',
// 哈希8位
filename: 'bundle.[hash:8].js',
// 输出后的路径(必须是一个绝对路径)
path: path.resolve(__dirname, 'dist')
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html',
// 生产开启，压缩代码
minify: {
// 删除html双引号
removeAttributeQuotes: true,
// 压缩成一行
collapseWhitespace: true
},
// 文件哈希
hash: true
})
]
}
- 5、index.html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
</head>
<body>
</body>
</html>
