webpack found no problems when packaging local development. When the project was to be deployed, the package compilation was happily delivered to the back-end staff.
however, there is an unexpected situation in which all dependencies referenced from node_modules have become absolute paths, but there is no such problem in development mode. When you open the compiled js file, you will find that the path is as follows:
and I, who have been thinking about it for a long time, do not know what the problem is. I have posted the configuration of webpack below. Please take a look at it. I would appreciate it.
webpack.dll.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
"lib": ["react", "react-dom", "react-router", "antd", "jquery", "echarts", "echarts-for-react"], //key
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: "manifest.json",
name: "[name]",
context: __dirname,
}),
],
};
webpack.config.js
var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// var autoprefixer = require("autoprefixer");
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //
var HappyPack = require("happypack");
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "./components/index.js");
var BUILD_PATH = path.resolve(ROOT_PATH, "build/");
function resolve(dir) {
return path.join(__dirname, "..", dir)
}
var config = {
entry: [
"react-hot-loader/patch",
APP_PATH,
],
output: {
path: BUILD_PATH,
filename: "bundle.js",
publicPath: "./build/",
chunkFilename: "js/[id].[chunkhash].js"
},
module: {
rules: [
{
test: /\.js(x)*$/,
use: ["happypack/loader?id=js"], //happypack
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: ["url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[hash].[ext]"],
exclude: function(path) {
// node_modules
return !!path.match("node_modules");
},
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: ["url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]"],
exclude: function(path) {
// node_modules
return !!path.match("node_modules");
},
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: ["url-loader?limit=10000&name=fonts/[hash].[ext]"],
exclude: function(path) {
// node_modules
return !!path.match("node_modules");
},
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: "url-loader?limit=8192&name=static/[name].[ext]",
options: {
publicPath: "/" //buildstatic
}
}
],
exclude: function(path) {
// node_modules
return !!path.match("node_modules");
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ["url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[hash].[ext]"],
exclude: function(path) {
// node_modules
return !!path.match("node_modules");
},
}
]
},
resolve: { //
extensions: [".js", ".json", ".jsx", "css"],
modules: ["node_modules"]
},
plugins: [
//
new ExtractTextPlugin({
filename: "build.css",
disable: false,
allChunks: true
}),
//jscss hash
// new WebpackMd5Hash(),//js
//dll
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.resolve(__dirname, "manifest.json"),
}),
//webpack
new HappyPack({
// id HappyPack
id: "js",
loaders: ["babel-loader"],
}),
],
};
module.exports = config;
webpack.build.js
var path = require("path");
var webpack = require("webpack");
var config = require("./webpack.config.js");
config.devtool = false;
config.plugins.push(new webpack.DefinePlugin({
process: {
env: {
NODE_ENV: JSON.stringify("production")
},
noDeprecation: true
}
}));
module.exports = config;
I was wondering if there was something wrong with my dll.config, which caused all my dependencies to become DVU, GSR, and GSR.
, I don"t know if you have ever encountered this kind of problem