html-webpack-plugin Sometimes my template file index.html is not packaged into the dist directory, with a probability of 1/4 or 1/3, meaning it doesn't happen every time

[liminggezs]

i used html-webpack-plugin Sometimes my template file index.html is not packaged into the dist directory, with a probability of 1/4 or 1/3, meaning it doesn't happen every time

[alexander-akait]

Please create reproducible test repo, I can't help only having screenshots

[liminggezs]

webpack.base.config.js
const path = require('path')
// const projectRoot = path.resolve(__dirname, '../')
const vueConfig = require('./vue-loader.config')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
devtool: '#source-map',
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.vue'],
alias: {
vue: 'vue/dist/vue.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'ELLIB': path.resolve(__dirname, '../node_modules/element-ui/lib'),
'ELCSS': path.resolve(__dirname, '../node_modules/element-ui/lib/theme-chalk'),
// 'RECORD_CONTROL': path.resolve(__dirname, process.env.APP_MODE !== 'observer' ? '../src/components/home.recordControl/home.recordControl.vue' : '../src/components/empty.vue'),
'SCRIPT_STEP': path.resolve(__dirname, process.env.APP_MODE !== 'observer' ? '../src/components/home.scriptStep/home.scriptStep.vue' : '../src/components/empty.vue'),
'SCRIPT_EDIT': path.resolve(__dirname, process.env.APP_MODE !== 'observer' ? '../src/components/home.scriptEdit/home.scriptEdit.vue' : '../src/components/empty.vue')
// 'FUNCTION':path.resolve(__dirname, process.env.APP_MODE!=='observer'?'../src/components/home.function/home.function.vue':'../src/components/empty.vue')
// 'SOC':path.resolve(__dirname, '../src/util')
}
},
output: function() {
const prod = process.env.NODE_ENV === 'static'
return {
path: path.resolve(__dirname, prod? '../../frontend-static/online' : '../dist'),
publicPath: prod?'./':'/dist/',
filename: prod? 'client-bundle.[hash:10].js' : 'client-bundle.js'
}
}(),
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueConfig
},
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(eot|svg|ttf|woff|woff2)(?\S*)?$/,
// test: /.(png|eot|svg|ttf|woff|woff2)(?\S*)?$/,
loader: 'file-loader'
},
{
// test: /.js$/,
test: /.js[x]?$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('node_modules/js-pinyin'),resolve("node_modules/element-ui/src/mixins/emitter.js")]
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
}

[liminggezs]

webpack.client.config.js
const base = require('./webpack.base.config')
const webpack = require('webpack')
const vueConfig = require('./vue-loader.config')
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var os = require('os');
var platform = os.platform().toLowerCase();
var port = require('../get-port');
//var beforeRecordInfo =require('../src/before-record-info');

// var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const config = Object.assign({}, base, {
entry: {
app: './src/client-entry.js',
vendor: ['vue', 'vuex', 'underscore', 'socket.io-client', 'esprima', 'babel-polyfill']
// vendor: ['vue', 'vue-router', 'vuex', 'vuex-router-sync', 'axios','lodash','socket.io-client']
},
plugins: (base.plugins || []).concat([
new CleanWebpackPlugin(),
// strip comments in Vue code
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'local'),
'process.env.APP_MODE': JSON.stringify(process.env.APP_MODE || ''),
'process.env.HOT': JSON.stringify(process.env.HOT),
}),
// extract vendor chunks for better caching
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: process.env.NODE_ENV === 'static' ? '[name].[hash:10].js' : '[name].js'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './public/index.html'
}),
new CopyWebpackPlugin([
{
from: 'public',
to: 'public',
ignore:['index.html']
}
])
])
})

const ExtractTextPlugin = require('extract-text-webpack-plugin');
vueConfig.css = ExtractTextPlugin.extract({
loader: 'css-loader',
fallbackLoader: 'vue-style-loader'
});
vueConfig.stylus = ExtractTextPlugin.extract({
loader: 'css-loader!stylus-loader',
fallbackLoader: 'vue-style-loader'
});
if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'gray' || process.env.NODE_ENV === 'vpc' || process.env.NODE_ENV === 'private' || process.env.NODE_ENV === 'static') {

if (!process.env.HOT) {
    config.plugins.push(
        new ExtractTextPlugin('styles.css'),
        // new BundleAnalyzerPlugin(),
        // this is needed in webpack 2 for minifying CSS
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),

        //minify JS
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true,
                dead_code: true //移除没被引用的代码
            }
        })
    )
}

}
webpack(config, function(err, stats) {
if (err) {
console.log('webpack err begin-----:');
console.log(err);
console.log('webpack err end-----');
return false;
}
process.stdout.write(stats.toString({
colors: true,
modules: true,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
})

module.exports = config

[liminggezs]

{
"name": "vue-ssr-starter-kit",
"version": "5.7.9",
"description": "A Vue.js project wuth vue 2.0, vue-router and vuex for server side rendering.",
"repository": {
"type": "git",
"url": "git+https://github.com/doabit/vue-ssr-starter-kit.git"
},
"keywords": [
"vue",
"vuex",
"vue-router",
"webpack",
"starter",
"server-side",
"boilerplate"
],
"author": "doabit doinsist@gmail.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/doabit/vue-ssr-starter-kit/issues"
},
"homepage": "https://github.com/doabit/vue-ssr-starter-kit#readme",
"scripts": {
"init": "npm install cross-env -g && npm install pm2 -g",
"dev": "cross-env NODE_ENV=private HOT=1 node server",
"build:private:client": "cross-env NODE_ENV=static webpack --config ./build//webpack.client.config.js --progress --hide-modules",
"build": "npm run build:private:client"
},
"dependencies": {
"axios": "^0.21.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-polyfill": "^6.26.0",
"blueimp-canvas-to-blob": "3.9.0",
"blueimp-md5": "2.7.0",
"body-parser": "^1.19.0",
"cookie-parser": "1.4.3",
"copy-webpack-plugin": "^4.6.0",
"deepmerge": "1.3.2",
"default-passive-events": "^2.0.0",
"element-ui": "2.15.3",
"esprima": "4.0.0",
"express": "^4.17.1",
"hammerjs": "2.0.8",
"html2canvas": "0.5.0-beta4",
"ice": "3.6.3",
"js-pinyin": "^0.1.9",
"lodash": "^4.17.21",
"lru-cache": "4.0.1",
"multer": "0.1.8",
"pako": "^1.0.11",
"serialize-javascript": "1.3.0",
"serve-favicon": "^2.5.0",
"socket.io": "1.7.4",
"sortablejs": "^1.14.0",
"underscore": "1.8.3",
"vue": "2.6.10",
"vue-i18n": "5.0.3",
"vue-server-renderer": "2.6.10",
"vue2-ace-editor": "0.0.15",
"vuex": "2.3.1"
},
"devDependencies": {
"babel-core": "6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "6.4.1",
"babel-plugin-component": "0.9.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"blueimp-canvas-to-blob": "3.9.0",
"broadway-player": "^0.1.1",
"clean-webpack-plugin": "^2.0.2",
"clipboard": "^2.0.4",
"cross-env": "5.0.0",
"css-loader": "^0.20.2",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "0.8.5",
"html-webpack-plugin": "^2.30.1",
"less": "2.7.2",
"less-loader": "2.2.3",
"open-browser-webpack-plugin": "0.0.5",
"style-loader": "^0.20.2",
"stylus": "0.54.5",
"stylus-loader": "2.5.1",
"vue-loader": "10.3.0",
"vue-template-compiler": "2.6.10",
"webpack": "2.6.1",
"webpack-dev-middleware": "1.10.2",
"webpack-hot-middleware": "2.18.0"
},
"main": "get-port.js"
}

[liminggezs]

The directory structure can refer to Figure 1

[alexander-akait]

@liminggezs Please use github to create a repo, it is not readable, thank you

[stale]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.