Node.js 为什么webpack没有完全编译文件?
当我使用webpack构建项目时,输出Node.js 为什么webpack没有完全编译文件?,node.js,npm,webpack,webpack-dev-server,Node.js,Npm,Webpack,Webpack Dev Server,当我使用webpack构建项目时,输出index.js很小(388kb),但不包括最新的更改。几秒钟后(可能在访问过一次网站之后),webpack似乎完全重新编译了所有内容,并生成了更大的index.js(24.9MB`)。webpack是故意这样做的吗?我是说先编译最小值,然后再编译完整值?如果是,有没有办法强制webpack在第一次运行时执行此操作?谢谢~ PS:除了网页包,我们使用Vue、nodejs、D3等,但我不认为有任何冲突 更新:将配置粘贴到此处 'use strict'; con
index.js
很小(388kb
),但不包括最新的更改。几秒钟后(可能在访问过一次网站之后),webpack似乎完全重新编译了所有内容,并生成了更大的index.js(
24.9MB`)。webpack是故意这样做的吗?我是说先编译最小值,然后再编译完整值?如果是,有没有办法强制webpack在第一次运行时执行此操作?谢谢~
PS:除了网页包,我们使用Vue、nodejs、D3等,但我不认为有任何冲突
更新:将配置粘贴到此处
'use strict';
const webpack = require('webpack');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
let merge = require('webpack-merge');
let baseWebpackConfig = require('./webpack.config');
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./tool/dev-client'].concat(baseWebpackConfig.entry[name]);
});
/**
* demo config
*
* @type {Object}
*/
module.exports = merge(baseWebpackConfig, {
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"demo"' // only diff from webpack.dev.config.js
}
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new FriendlyErrorsPlugin()
]
});
以及baseWebpackConfig
'use strict';
const webpack = require('webpack');
const path = require('path');
const projectPath = path.resolve(__dirname, '..');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const argv = require('yargs').argv;
const isDev = process.env.NODE_ENV === 'dev';
const entry = require('./entry');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function getLoaders(isDev, ext) {
let arr = ['css-loader'];
if (ext) {
arr.push(ext + '-loader');
}
if (isDev) {
arr.unshift('style-loader');
return arr;
}
return ExtractTextPlugin.extract({
use: arr,
fallback: 'style-loader'
});
}
/**
* entry config
*
* @type {Object}
*/
const ENTR_CONFIG = entry.get(argv.app, argv.template);
/**
* webpack config
*
* @type {Object}
*/
const config = {
entry: ENTR_CONFIG.module,
output: {
path: path.resolve(projectPath, 'dist'),
filename: '[name].[hash].js'
},
resolve: {
alias: {
axios: 'axios/dist/axios.min.js',
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(projectPath, 'src'),
style: path.resolve(__dirname, '../src/style')
},
extensions: ['.js', '.json', '.styl', '.css', '.html', '.vue']
},
module: {
noParse: [
/node_modules\/(axios)\//
],
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
include: [
path.resolve(projectPath, 'src')
],
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.html/,
loader: 'html-loader',
options: {
minimize: false
}
},
{
test: /\.css$/,
use: getLoaders(isDev)
},
{
test: /\.styl$/,
use: getLoaders(isDev, 'stylus')
},
{
test: /\.(gif|png|jpe?g|svg|wav)$/i,
loader: 'file-loader',
options: {
name: 'assets/[name].[hash].[ext]'
}
},
{
test: /\.woff2?$/,
loader: 'url-loader',
options: {
name: 'fonts/[name].[hash].[ext]',
limit: '10000',
mimetype: 'application/font-woff'
}
},
{
test: /\.(ttf|eot)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash].[ext]'
}
}
]
},
plugins: [
new CaseSensitivePathsPlugin(),
new webpack.LoaderOptionsPlugin({
test: /\.(styl)$/
}),
new ExtractTextPlugin({filename: '[name].css'})
],
externals: {
dagreD3: 'dagre-d3',
}
};
// template config
config.plugins = config.plugins.concat(ENTR_CONFIG.template);
module.exports = config;
触发器外壳脚本如下所示:
./node_modules/.bin/webpack --watch --config tool/webpack.demo.config.js --output-path=../visualdl/server/dist &
这可能意味着您配置错误。@SLaks:谢谢您的及时回复。是否有强制编译的标志?WebPack根本不这样做。您可能对某个文件进行了错误配置,最终两次发送同一个文件。是否可以发布您的网页配置,以便我们指向正确的方向?网页包通常不会这样做。@Alex.P。我已经发布了配置:)