npm 简化 npx 打包命令
- 使用 npx 打包：npx weppack --config webpack.config.js 使用 webpack.config.js 配置文件打包；
- 使用 npm 打包：npm run build
"scripts": { /* windows 不支持 NODE_ENV = development 的设置方式，设置 cross-env 解决 */ "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js" },
配置文件常用配置项介绍
mode 开发模式
development 开发环境，不会对打包生成的文件进行代码压缩和性能优化，打包速度快；
production 生产环境，会对打包生成的文件进行代码压缩和性能优化，打包速度很慢，会开启 debug 打印详细的错误信息；
devtool
用于配置 source map 代码映射；
entry 打包入口
JavaScript
JavaScript
JavaScript
JavaScript
/* 当 entry 是字符串时：表示只有一个要打包的模块 */
entry: "./app/one.js"
/* 当 entry 是数组时：表示将多个模块打包成一个模块，如果这些模块之间不存在依赖，数组中值的顺序没有要求，如果存在依赖，则要将依赖性最高的模块放在最后面 */
entry: ["./app/two.js", "./app/three.js"]
/* 多入口打包，当 entry 是一个键值对形式的对象时，分别打包成多个模块时，包名就是键名 */
entry: {
main: "./app/one.js",
subject: "./app/two.js"
}
/* 多入口打包，直接读取入口文件，动态生成 entry 的键值对对象 */
const { resolve, join, basename } = require("path");
const fs = require("fs");
let rootPath = resolve(__dirname, 'src', 'pages'); // 获取绝对路径
let fileNameArr = fs.readdirSync(rootPath); // pages 文件夹下的所有入口文件名字数组
let entry = fileNameArr.reduce((obj, fileName) => {
obj[basename(fileName, '.js')] = join(rootPath, fileName);
return obj;
}, {});
console.log(entry);
// {
// page1: '/Users/1.basic/src/pages/page1.js',
// page2: '/Users/1.basic/src/pages/page2.js'
// }
entry: entry
output 打包出口
output: {
filename: 'bundle.js', // 定义输出文件名
// filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist'), // 定义输出文件路径
publicPath: 'dist/', // 基础路径：表示项目根目录下的 dist
},
module
定义一系列 loader ，webpack 只能打包 js 和 json，loader 让 webpack 可以去处理 css、图片 等其他类型的文件；
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader']},
// ...
],
noParse: /jquery/, // 不解析正则表达式匹配的模块，通常用它来 忽略那些大型的单模块库，以提高构建性能
}
plugins
插件用于增强 webpack 自动化能力，打包优化，资源管理，注入环境变量等；
plugins: [
new VueLoaderPlugin(),
...EntryHtmlWebpackPlugin,
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '..', 'static/cabinet'),
to: 'images/cabinet',
},
{
from: path.resolve(__dirname, '..', 'static/svg'),
to: 'images/svg',
},
{
from: path.resolve(__dirname, '..', 'static/device'),
to: 'images/device',
},
{
from: path.resolve(__dirname, '..', 'static/js'),
to: 'js',
},
],
}),
],
resolve
resolve 影响对 模块 的解析；
- alias 配置解析模块路径的别名，优点是简写路径，缺点是没有路径提示；
- extensions 配置省略文件路径的后缀名，按顺序解析后缀名；
- fallback webpack5 不再自动填充 node.js 核心模块，如果确认需要 node polyfill，可设置 resolve.fallback 安装对应依赖；
- …
resolve: {
alias: {
'@': path.resolve(__dirname, '../src'),
},
extensions: ['.js', '.ts', '.tsx', '.vue'],
// 如果确认需要 node polyfill, 设置 resolve.fallback 安装对应依赖
fallback: {
buffer: require.resolve('buffer/'),
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
},
},
打赏作者
您的打赏是我前进的动力
微信
支付宝
webpack 核心功能👉 模块化兼容性
上一篇
评论
