【发布时间】：2019-11-12 11:41:28
【问题描述】：
我正在开发中运行 webpack-dev-server，它可以毫无问题地为我的项目服务。如果我在 webpack 配置中使用 mode: "development" 构建项目，则根本没有任何问题。
但是当我使用 mode: "production" 运行 webpack 时，它不起作用。
这是我的 webpack 配置（common、dev 和 prod）：
// webpack.common.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '../', dir);
}
const env = process.env.NODE_ENV || 'development';
module.exports = {
target: "web",
entry: {
vendors: './src/assets/vendors.js',
bundle: './src/bin/www'
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
output: {
path: resolvePath('dist'),
filename: '[name].js'
},
externals: {
jquery: "jQuery",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(html)$/,
exclude: /node_modules/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg|jpg|jpeg|png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader'
]
},
],
},
};
// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-source-map',
devServer: {
contentBase: './dist'
}
});
// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'production'
});
构建正在运行，但是当我尝试在浏览器中运行代码时，使用 http-server，我会出现下一个错误 - 仅在构建用于生产而不是开发时！ （我使用的是 AngularJS 1.7.2）：
at angular.js:99 at angular.js:5027 at q (angular.js:387) at g (angular.js:4987) at hb (angular.js:4904) at c (angular.js:1936) at Vc (angular.js:1957) at ye (angular.js:1842) at HTMLDocument.<anonymous> (angular.js:35431) at l (jquery.min.js:2)
我从 webpack 收到警告说我的包太大了。也许这就是问题所在？
【问题讨论】：