一、入口、出口配置
1. 多入口、单出口
//入口配置
entry: ['./src/index.js','./src/index2.js',]
2. 多入口、多出口
//入口配置
entry: {
index: './src/index.js',
index2: './src/index2.js',
},
//出口配置
output: {
path: path.resolve(__dirname,'dist'), //此处若非绝对路径，可能报错
filename: '[name].bundle.js',
},
二、生成页面插件：html-webpack-plugin
1. 基础使用
(1)安装：cnpm i html-webpack-plugin -D
*注意：此插件依赖webpack、webpack-cli，因此项目本地必须提前安装webpack、webpack-cli
(2)引入：const HtmlWebpackPlugin = require('html-webpack-plugin');
(3)简单使用：
plugins: [
//生成页面
new HtmlWebpackPlugin(),
],
(4)配置功能：
plugins: [
new HtmlWebpackPlugin({
//页面标题
title: '自动生成页面',
//模板
template: './src/index.html',
//消除链接生成的缓存
hash: true,
//压缩输出
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
],
*注意如果要使用配置中的标题需在html模板中引用，否则可能报错：
//src/index.html
<title><%=htmlWebpackPlugin.options.title%></title>
2. 生成多个页面
plugins: [
//生成第一个页面
new HtmlWebpackPlugin({
//页面引入的模块,名称在入口配置中
chunks: ['index',],
//页面的文件名称
filename: 'index.html',
//页面标题
title: '自动生成页面',
//模板
template: './src/index.html',
}),
//生成第二个页面
new HtmlWebpackPlugin({
//页面引入的模块,名称在入口配置中
chunks: ['index2',],
//页面的文件名称
filename: 'index2.html',
//页面标题
title: '第二个页面',
//模板
template: './src/index2.html',
}),
],
三、删除文件插件：clean-webpack-plugin
- 安装：
cnpm i clean-webpack-plugin -D - 引用：
const CleanWebpackPlugin = require('clean-webpack-plugin'); - 使用：
plugins: [
//删除文件夹dist
new CleanWebpackPlugin(['dist']),
],
四、开发服务器：webpack-dev-server
- 安装：
cnpm i webpack-dev-server -D - 配置：
devServer: {
//设置服务器访问的基本目录，
contentBase: path.resolve(__dirname,'dist'),
//设置服务器IP地址
host: 'localhost',
//设置端口
port: 8080,
//自动打开浏览器
open: true,
//热更新
hot: true,
},
- 使用：
(1)在package.json文件中的 "scripts"，新增dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js --mode development",
"dev": "webpack-dev-server --mode development"
},
(2)在命令行中运行webpack-dev-server
...\webpack>cnpm run dev
- *注意：
(1)即使项目中暂未生成dist文件夹，也会根据webpack.config.js文件中的配置搭建服务器。
(2)json格式中对象的最后一个属性（即"dev"）后不能加","，否则可能报错。
(3)想要自动打开浏览器可以配置devServer:{open:true,}，也可以在命令中加入参数"dev": "webpack-dev-server --mode development -open"
(4)热更新：当某些模块更改时，页面无需刷新即可自动同步更改，开启热更新时，将会阻止页面自动刷新功能。
要打开热更新需要先启用热更新模块，否则可能会报错：Uncaught Error: [HMR] Hot Module Replacement is disabled.
开启热更新模块：
//引用webpack
const webpack = require('webpack');
plugins: [
//启用热更新
new webpack.HotModuleReplacementPlugin(),
],
五、压缩上线：
使用webpack打包的项目，如果要上线，肯定需要压缩，如何压缩呢？
- webpack4.x版本非常简单，直接用产品模式打包就行：
webpack --mode production - 之前的版本则需要使用uglifyjs-webpack-plugin插件压缩：
(1)安装：cnpm i uglifyjs-webpack-plugin -D
(2)引入：const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
(3)使用：
plugins: [
new UglifyjsWebpackPlugin(),
]
