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