创建局部的webpack
-
创建package.json文件，用于管理项目的信息、库依赖等
npm initn 第三步：使用局部的webpack n 第四步：在package.json中创建scripts脚本，执行脚本打包即可 创建局部的webpack npm init npm install webpack webpack-cli -D npx webpack npm run build
安装局部的webpack
npm install webpack webpack-cli -D使用局部的webpack
npx webpack-
在package.json中创建scripts脚本，执行脚本打包即可
"scripts": { //基本配置 "build": "webpack" //可指定配置文件，即（webpack.config.js） "build": "webpack --config webpack.config.js" },
常用配置
const path = require('path');
// 删除dist文件夹：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 进行项目部署的时，必然也是需要有对应的入口文件index.html；
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
// 如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
// p可选值有：'none' | 'development' | 'production'；
mode: 'development',
// 设置source-map, 建立js映射文件, 方便调试代码和错误
devtool: "source-map",
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "./build"),
filename: "build.js"
},
devServer: {
contentBase: "./public",
// 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；
hot: true,
// localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
// 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序;
// 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的;
host: "0.0.0.0",
port: 7777,
// open是否打开浏览器：
open: true,
// compress是否为静态文件开启gzip compression,默认值是false
compress: true,
// proxy: {
// "/api": {
// // 表示的是代理到的目标地址
// target: "http://localhost:8888",
// // 默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite
// pathRewrite: {
// "^/api": ""
// },
// // 默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
// secure: false,
// // ：它表示是否更新代理后请求的headers中host地址
// changeOrigin: true
// }
// }
},
resolve: {
// extensions是解析到文件时自动添加扩展名(默认值是 ['.wasm', '.mjs', '.js', '.json'])
extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
// 是配置别名alias：
alias: {
"@": path.resolve(__dirname, "./src"),
"js": path.resolve(__dirname, "./src/js")
}
},
// module.rules中允许我们配置多个loader
module: {
rules: [
{
// test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式
test: /\.(css|less)$/,
// 1.loader语法糖写法
// loader: "css-loader"
// 2.完整的写法
// 采用倒序加载使用loader(即从下往上)
use: [
"style-loader",
"css-loader",
"less-loader",
{
// 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
loader: "postcss-loader",
// 可选的属性，值是一个字符串或者对象，值会被传入到loader中；
options: {
postcssOptions: {
plugins: [
require("autoprefixer")
]
}
}
}
]
},
// {
// // 对字体进行处理
// test: /\.(eot|ttf|woff2?)$/,
// use: {
// loader: 'file-loader',
// // [ext]： 处理文件的扩展名；
// // [name]：处理文件的名称
// // [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
// // p [path]：文件相对于webpack配置文件的路径；
// options: {
// name: 'fong/[name]_hash[6][ext]'
// }
// }
// },
// {
// // 对图片进行处理
// test: /\.(jpe?g|png|gif|svg)$/,
// use: {
// loader: "url-loader",
// options: {
// // outputPath: "img",
// name: "img/[name]_[hash:6].[ext]",
// // limit，可以用于设置转换的限制；下面的代码38kb的图片会进行base64编码，而295kb的不会；
// limit: 100 * 1024
// }
// }
// },
// 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader
// 资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader
// 1.asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
// 2.asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
// 3.asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；
// 4.asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
{
// 对图片进行处理
test: /\.(jpe?g|png|gif|svg)$/,
type: 'asset',
generator: {
filename: "img/[name]_[hash:6].[ext]",
// 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；
// parser: {
// dataUrlCondition: {
// maxSize: 100 * 1024
// }
// }
}
},
{
// 对字体进行处理
test: /\.(eot|ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "font/[name]_[hash:6][ext]",
// limit: 100 * 1024
}
},
{
test: /\.js$/,
loader: "babel-loader"
}
]
},
// Loader是用于特定的模块类型进行转换；
// Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息
title: 'webpack案例',
// template：指定我们要使用的模块所在的路径；
template: './public/index.html'
}),
// DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装)
new DefinePlugin({
BASE_URL: "'./'"
}),
new CopyWebpackPlugin({
// 复制的规则在patterns中设置；
// from：设置从哪一个源中开始复制；
// to：复制到的位置，可以省略，会默认复制到打包的目录下；
// globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
// .DS_Store：mac目录下回自动生成的一个文件；
// index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；
patterns: [
{
from: 'public',
globOptions: {
ignore: [
'**/.DS_Store',
'**/index.html',
]
}
}
]
})
]
}
