极客观点
项目管理
HarmonyOS
这是webpack配置
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { merge } = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const config = {
entry: "./src/index.js",
mode: "development",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/[name].[hash:6].js",
},
devServer: {
publicPath: "/",
contentBase: path.join(__dirname, "dist"),
port: 3000,
historyApiFallback: true, // 该选项的作用所有的404都连接到index.html
hotOnly: true,
},
resolve: { extensions: ["*", ".js", ".jsx"] },
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true,
})
],
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0 // This is example is too small to create commons chunks
},
vendor: {
//第三方依赖
priority: -10, //设置优先级，首先抽离第三方模块
name: 'vendor',
// test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/,
test: /node_modules/,
chunks: 'initial',
reuseExistingChunk: true,
minSize: 100,
minChunks: 1 //最少引入了1次
},
}
}
},
module: {
noParse: /lodash/,
rules: [
{
test: /\.(js|jsx)$/,
use: ["cache-loader", "babel-loader"],
include: [path.resolve(__dirname, "src")],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.(png|jpg|jpeg|gif|svg)/,
use: {
loader: "url-loader",
options: {
outputPath: "images/", // 图片输出的路径
limit: 10 * 1024,
},
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["**/*", "!dll", "!dll/**"], //不删除dll目录
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "./public/index.html"), //指定模板页面
filename: "index.html",
}),
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require(path.resolve(
__dirname,
"./dist/dll/vendors.manifest.json"
)),
}),
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require(path.resolve(
__dirname,
"./dist/dll/antd.manifest.json"
)),
}),
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require(path.resolve(
__dirname,
"./dist/dll/react.manifest.json"
)),
}),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, "./dist/dll/react.dll.js")
}),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, "./dist/dll/vendors.dll.js"),
}),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, "./dist/dll/antd.dll.js"),
}),
],
};
// module.exports = merge(smp.wrap(config), {
// plugins: [
// //...
// new BundleAnalyzerPlugin(),
// ]
// });
module.exports = smp.wrap(config);
这是package
{
"name": "react-demo",
"version": "1.0.0",
"description": "this is react-demo",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "better-npm-run start",
"build:sit": "better-npm-run build:sit",
"build:uat": "better-npm-run build:uat",
"build:prd": "better-npm-run build:prd",
"build:dll": "better-npm-run build:dll"
},
"betterScripts": {
"start": "cross-env webpack-dev-server --open --color --mode development",
"build:sit": {
"command": "cross-env webpack --progress --profile --color",
"env": {
"NODE_ENV": "production",
"env_config": "sit"
}
},
"build:uat": {
"command": "cross-env webpack --progress --profile --color",
"env": {
"NODE_ENV": "production",
"env_config": "uat"
}
},
"build:prd": {
"command": "cross-env webpack --progress --profile --color",
"env": {
"NODE_ENV": "production",
"env_config": "prod"
}
},
"build:dll": "webpack --config webpack.config.dll.js"
},
"author": "LMandXY",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.10.5",
"add-asset-html-webpack-plugin": "^3.1.3",
"babel-loader": "^8.1.0",
"better-npm-run": "^0.1.1",
"cache-loader": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"happypack": "^5.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"html-webpack-plugin": "^4.3.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.12.21",
"sass-loader": "^9.0.2",
"speed-measure-webpack-plugin": "^1.3.3",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.8",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9"
},
"dependencies": {
"@babel/runtime-corejs2": "^7.10.5",
"antd": "^4.5.2",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"moment": "^2.27.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0"
}
}
问题是我只是引入了antd就报错，注释antd引入就没问题
只有不需要解析任何文件的库才可以noParse，lodash内部使用解析了其它文件
可以看一下官方文档