前言
本文将简单介绍如何使用webpack
编译构建nodejs
项目。
1. 安装依赖
1.1 安装webpack
npm install --save-dev webpack@4 webpack-cli@3
npm install -g webpack-cli@3
1.2 其他依赖包
主要是webpack插件
{
"devDependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.15.4",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.4.4",
"@babel/preset-typescript": "^7.14.5",
"@babel/runtime": "^7.15.4",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"friendly-errors-webpack-plugin": "^1.7.0",
"terser-webpack-plugin": "^3.0.1",
"ts-loader": "^8.3.0",
"ts-node": "^10.2.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.11"
}
}
2. 执行构建
本小节将介绍webpack构建的执行步骤。
2.1 新建 webpack.config.js配置文件
// webpack.config.js
const path = require('path')
const os = require('os')
const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const projectPath = process.cwd()
const srcDirPath = path.resolve(__dirname, 'src')
const nodeModulesPath = path.resolve(__dirname, 'node_modules')
module.exports = {
devtool: 'none',
target: 'node',
mode: 'none',
context: path.resolve(projectPath),
mode: process.env.NODE_ENV,
entry: path.resolve(projectPath, 'src/main.js'),
output: {
filename: 'main.js',
path: path.join(projectPath, 'dist')
libraryTarget: 'commonjs2',
},
resolve: {
alias: {
'@': srcDirPath,
},
extensions: ['.ts', '.js'],
mainFiles: ['index'],
modules: [srcDirPath, nodeModulesPath],
},
performance: {
hints: false,
},
stats: (() => {
return {
warnings: false,
assets: true,
assetsSort: '!size',
cached: true,
builtAt: true,
cachedAssets: true,
children: true,
chunksSort: '!size',
chunkGroups: true,
chunkModules: true,
chunkOrigins: true,
chunks: true,
colors: true,
depth: true,
entrypoints: true,
env: true,
errorDetails: true,
errors: true,
}
})(),
optimization: {
runtimeChunk: false,
minimizer: [
// 丑化代码
new TerserPlugin({
test: /\.js$/i,
parallel: os.cpus().length,
sourceMap: true,
extractComments: false,
terserOptions: {
ecma: 5,
warnings: false,
parse: {},
compress: {},
mangle: true,
keep_classnames: false,
keep_fnames: false,
output: {
beautify: false,
comments: false,
// 只用单引号
quote_style: '1',
},
},
}),
],
},
plugins: [
// 控制台输出信息
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [],
notes: [],
},
clearConsole: true,
}),
// 忽略某些模块的转换操作
new webpack.IgnorePlugin({
checkResource(resourcePath) {
return false
},
}),
// 清理资源
new CleanWebpackPlugin({
verbose: true,
cleanStaleWebpackAssets: false,
cleanOnceBeforeBuildPatterns: ['**/*'],
}),
],
module: {
rules: [
// 增加对 typescript 的支持
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/,
},
// 转换 es6 到 es5
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
}
2.2 配置打包命令
{
"scripts": {
"watch": "cross-env npx webpack --config webpack.config.js --watch --devtool source-map --mode development",
"build": "cross-env npx webpack --config webpack.config.js --mode production"
},
}
2.3 执行打包操作
- 开发环境:
npm run watch
- 生产环境:
npm run build