Bug report
What is the current behavior?
the main.js has been loaded,but it didn’t run
If the current behavior is a bug, please provide the steps to reproduce.
the devDependencies package.json
"autoprefixer-loader": "^2.0.0",
"babel": "^6.23.0",
"babel-eslint": "^8.2.3",
"babel-preset-env": "^1.7.0",
"babel-core": "^6.23.1",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.9.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"eslint": "^4.19.1",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-html": "^4.0.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"less-loader": "^4.1.0",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.5",
"style-loader": "^0.21.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^2.3.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^15.2.4",
"vue-property-decorator": "^6.1.0",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^4.12.0",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
the base.config
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: {
main: './src/main.js',
vendors: './src/vendors'
},
output: {
path: '/dist'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: [MiniCssExtractPlugin.loader,'postcss-loader'],
less: [MiniCssExtractPlugin.loader,'postcss-loader']
}
}
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
]
},
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
},
{
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename :'[name].css',
chunkFilename:'[id].css'
}),
new VueLoaderPlugin()
],
node: {
fs: 'empty'
},
resolve: {
extensions: ['.js', '.vue', '.ts'],
alias: {
'vue': 'vue/dist/vue.esm.js'
}
}
};
the devConfig
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
fs.open('./src/config/env.js', 'w', function(err, fd) {
const buf = 'export default "development";';
fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
devtool: '#source-map',
output: {
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename :'[name].css',
chunkFilename:'[id].css'
}),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/template/index.ejs',
inject: false
})
]
});
the main.js
alert('foo')
What is the expected behavior?
Other relevant information:
webpack version: 4.12.0
Node.js version: 8.11.1
Operating System: win32 6.1.7601
Additional tools:
I seem to be having the same problem on the latest version (4.12.1). I have
runtime.js,vendor.js, andapp.js, each rendered in theindex.html. When I place breakpoints,runtime.jsseems to evaluate as expected, but the inner contents of theapp.jsIIFE are never hit. This behavior only occurs in production – development is fine.I found the solution to my specific (unrelated) problem. Just wanted to post this in case it will save days/weeks of someone else’s life (@ChieveiT?).
The issue was that the
style.jsfile that Webpack now produces was not being rendered on the page by the server’s templating logic. For more information about this style extraction problem:webpack-contrib/mini-css-extract-plugin#151
webpack-contrib/mini-css-extract-plugin#113
In my specific scenario, I didn’t want to inject the script on the page anyways (since it’s essentially a blank file). However, it’s critical that the contents of that file are evaluated on the page, else the
webpackJsonpinternals will get screwed up. So, I wrote a crappy plugin that takes the file’s contents and prepends it to myvendor.js. This solution is very jenky, and I very much look forward to Webpack providing a solution (where the file isn’t generated at all)…