webpack
概念：
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
作用：
1. 压缩代码 html,css,js
2. 优化图片资源，把小图标转成base64
3. 提供自动化刷新页面http服务
4. 优化项目的代码（减少执行冗余代码）
5. 对项目资源进行优化整合
6. 提升了项目开发效率
如遇网络问题，换国内淘宝镜像服务下载依赖包
npm install cnpm -g --registry=https://r.npm.taobao.org
安装webpack打包环境
从npm服务器下载模块文件
npm install
或者
npm i
步骤：
初始化项目
npm init -y
全局安装打包环境
npm install webpack webpack-cli -g
或在本地安装打包环境
npm install webpack webpack-cli --save-dev
安装项目所需的依赖模块
配置webpack.config.js文件
配置过程
第一步：webpack.config.js相关配置
webpack.config.base.js
// 引入 path 依赖包
const path = require("path");
// 引入处理html模板的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入清理冗余文件的包
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 引入提取css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 暴露打包配置选项对象 {key: value}
module.exports = {
// 入口
entry: {
index: "./src/index.js"
},
// 输出
output: {
// 输出的路径
path: path.resolve(__dirname, "../dist"),
// 输出的文件名称 哈希值（随机字符）
// 利用随机字符命名，可以保证每个http请求是新的
filename: "js/[name]-[hash:8]-bundle.js"
},
// 处理非JS文件的配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/i,
use: [
// "style-loader", // 把js文档写入打包的js文件中
MiniCssExtractPlugin.loader,
"css-loader" // 把css文档转成js文档
]
},
// 处理scss文件
{
test: /\.s[ac]ss$/i,
use: [
// "style-loader", // 把js文档写入打包的js文件中
MiniCssExtractPlugin.loader,
"css-loader", // 把css文档转成js文档
"sass-loader" // 把sass文档转成css文档
]
},
// 处理图片文件（base64）
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 限制图片大小
// 超出10kb ，就不转base64字符串，否则转成base64
limit: 10250,
// 输出的目录
outputPath:"img/",
// 设置超出10kb以及位置
name: "[name]-[hash:8].[ext]",
// 采用 commonjs 语法模块
//esModule:false
}
}
]
},
// 处理html模板中的图片
//{
//test: /\.(htm|html)$/i,
//use: ['html-withimg-loader']
//},
// 处理ES6文档
{
test: /\.m?js$/,
exclude: /node_modules/, // 排除那些js文件（不需要打包）
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
}
]
},
// webpack插件相关的配置
plugins: [
// 处理html模板
new HtmlWebpackPlugin({
title: "首页 轮播图", //网页标题
template: "./src/template/index.html", //模板路径（千万不要写错）
filename: 'index.html', //html文件名称/位置
inject: 'body', // 设置html模板中脚本的位置
chunks:['index'] // 引入指定的代码块
}),
// 清除冗余文件
new CleanWebpackPlugin(),
// 抽离css代码
new MiniCssExtractPlugin({
// 文件名称和位置
filename: 'css/[name].css'
})
]
}
webpack.config.dev.js
// 引入 path 依赖包
const path = require("path");
// 导入merge 依赖包
const { merge } = require('webpack-merge');
// 公共配置文件（对象）
const base = require('./webpack.config.base');
// 当前开发环境下的配置文件
let options = {
// 开发模式
mode: "development",
// 配置webpack http 服务 devServer
devServer: {
// 在指定的dist目录开启http服务
contentBase: path.resolve(__dirname, "../dist"),
// 端口
port: 9090,
// 自动打开浏览器
open: true,
// ...
proxy: {
//代理api
'/api': {
// 代理接口(服务器地址)
target: 'http://127.0.0.1:8080',
//是否跨域
changeOrigin: true,
//重写路径
pathRewrite: {
//代理路径
'^/api': ''
},
//secure: false, // 设置支持https协议的代理
}
}
}
}
// 导出配置选项对象
module.exports = merge(base, options)
webpack.config.prod.js
// 引入 path 依赖包
const path = require("path");
// 导入merge 依赖包
const { merge } = require('webpack-merge');
// 公共配置文件（对象）
const base = require('./webpack.config.base');
// 开发环境的配置
const options = {
// 生产模式
mode: "production"
}
// 导出当前配置选项对象
module.exports = merge(base,options)
第二步 ：配置package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open --config ./config/webpack.config.dev.js",
"dev": "npx webpack --config ./config/webpack.config.dev.js",
"prod": "npx webpack --config ./config/webpack.config.prod.js"
},
第三步：运行命令
