1.npm初始化
npm init
npm install --save-dev webpack webpack-cli
复制代码2.新建目录结构
（ 简易版，仅供参考 ）
3.配置mode、入口文件和输出文件
const path = require("path");
module.exports = {
// 模式 development \ production
mode: "development",
// 入口文件
entry: path.resolve(__dirname, "src/index.js"),
// 输出文件地址及文件名称
output: {
path: path.resolve(__dirname, "build"),
filename: "build.[contenthash:10].js",
},
}
复制代码4.引入HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins:[
new HtmlWebpackPlugin({
// 模板文件地址
template: path.resolve(__dirname, "public/index.html"),
// 打包生成的html文件的名称
filename: "index.html",
// 压缩html打包文件
minify:{
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
}
})
]
}
复制代码5.引入CleanWebpackPlugin
用于删除/清理之前的构建文件夹。
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports={
plugins:[
new CleanWebpackPlugin()
]
}
复制代码6.配置webpack-dev-server
将webpack与提供实时重载的开发服务器一起使用，自带了 HMR 功能。
- --open：是自动打开浏览器，后面加上相应的浏览器名字就能打开不同的浏览器
- --port 3000：代表运行在3000的端口
- --progress：代表进度
- --host：指定端口号，一般默认的都是localhost的端口，–host+空格+后面加上端口号就可以改变端口号：--host 129.0.0.1
package.json文件中添加 dev 配置。
（此处报错大概率是由于webpack-dev-server和webpack-cli的版本相互不兼容产生的。）
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js --progress --port 8000",
"webpack": "webpack --progress"
},
复制代码7.配置样式相关loader
当某种文件的处理存在多个loader时，执行顺序为数组从右往左。
css样式（style-loader、css-loader）
module.exports = {
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
}
复制代码less样式（style-loader、css-loader、less-loader）
module.exports = {
module:{
rules:[
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
复制代码8.配置样式相关插件，优化样式打包
使用MiniCssExtractPlugin
将 css 从打包的 js 文件中提取出来，加快页面响应速度
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:[
// 将样式提取出来
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test:/\.less$/,
use:[
// 将样式提取出来
MiniCssExtractPlugin.loader,
"css-loader",
'less-loader'
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename: "bundle.[contenthash:10].css",
})
]
}
复制代码使用postcss-loader
让样式兼容不同的浏览器
webpack.config.js
const CommonCss = [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
// 自动补齐前缀
plugins: [["postcss-preset-env"]],
},
},
},
];
module.exports = {
module:{
rules:[
{
test:/\.css$/,
use:[...CommonCss]
},
{
test:/\.less$/,
use:[...CommonCss,'less-loader']
}
]
}
}
复制代码package.json
配置需要兼容的浏览器
"browserslist": [
">=1%", // 份额大于1%
"last 2 versions" // 最新的两个版本
]
复制代码使用OptimizeCssAssetsWebpackPlugin
压缩打包后的 css 样式文件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports={
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
}
复制代码9.配置图片相关loader（url-loader、file-loader）
module.exports = {
module:{
rules:[
{
test:/\.(png|jpg|gif)$/,
loader: "url-loader",
options:{
// 当图片小于8K时，将图片进行base64处理，从而减少对于图片的请求
limit: 8 * 1024,
name: path.posix.join("images/[hash:10].[ext]"),
}
}
]
}
}
复制代码10.配置JS相关loader（babel-loader、core-js）
module.exports = {
module:{
rules:[
// @babel/preset-env:基本的js兼容性处理
// core-js 懒加载式得去做浏览器得兼容性处理,加快页面的响应
{
test:/\.js$/,
include: path.resolve(__dirname, "src"),
loader: "babel-loader",
options:{
presets:[
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs:{
version: 3,
},
targets:{
chrome: "60",
ie: "8",
edge: "17",
}
}
]
],
// 开启babel缓存
// 第二次构建时会读取之前的缓存
cacheDirectory: true,
}
}
]
}
}
复制代码11.配置ts相关loader（babel-loader、ts-loader）
npm install --save-dev typescript @types/react @types/react-dom ts-loader
module.exports = {
module:{
rules:[
{
test:/\.js$/,
include: path.resolve(__dirname, "src"),
use: ["babel-loader", "ts-loader"],
}
]
}
}
复制代码12.配置文件夹别名
module.exports={
resolve:{
alias:{
"@assets": path.resolve(__dirname, "src/assets"),
"@store": path.resolve(__dirname, "src/store"),
"@style": path.resolve(__dirname, "src/style"),
}
}
}
复制代码13.代码块分离打包
module.exports={
// code split代码分离
// 将引入的代码单独打包成一个chunk输出
optimization:{
splitChunks:{
chunks: "all",
}
}
}
复制代码14.source-map
提供源代码到构建后代码的映射技术。
主要用于调试，现在代码都会经过压缩混淆，这样报错提示会很难定位代码，sourcemap就是一个信息文件，里面存储着位置信息，也就是说，转换后的代码的每个位置，所对应的转换前的位置。
module.exports={
// 开发环境推荐使用 eval-source-map
// 生产环境——调试 source-map / cheap-module-source-map
// 生产环境——上线 nosources-source-map / hidden-source-map(只隐藏源代码)
devtool: "eval-source-map",
}
复制代码
