2

In, my Vue.JS project, after I run :

npm run build 

in the dist directory there is no index.html file:

enter image description here

my webpack.base.config.js file is :

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main',
    vendors: './src/vendors'
  },
  output: {
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            loaders: {
              less: ExtractTextPlugin.extract({
                use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
                fallback: 'vue-style-loader'
              }),
              css: ExtractTextPlugin.extract({
                use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
                fallback: 'vue-style-loader'
              })
            }
          }
        },
          {
            loader: 'iview-loader',
            options: {
              prefix: false
            }
          }
        ]
      },
      {
        test: /iview\/.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader?minimize', 'autoprefixer-loader'],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader?limit=1024'
      },
      {
        test: /\.(html|tpl)$/,
        loader: 'html-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    }
  }
};

my webpack.prod.config.js code is bellow:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');

fs.open('./src/config/env.js', 'w', function (err, fd) {
  const buf = 'export default "production";';
  fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
  });
});

module.exports = merge(webpackBaseConfig, {
  output: {
    publicPath: '/dist/',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].chunk.js'
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].[hash].css',
      allChunks: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'vendors.[hash].js'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new HtmlWebpackPlugin({
      filename: '../index_prod.html',
      template: './src/template/index.ejs',
      inject: false
    })
  ]
});

edit-1

$ npm run build

> [email protected] build /Users/lkl/Desktop/my-project/web/wx_backup
> webpack --progress --hide-modules --config webpack.prod.config.js
2
  • 1
    Could you show us which command is invoked by your npm run build ? Commented Apr 8, 2018 at 15:47
  • see my edit. bro Commented Apr 8, 2018 at 16:06

1 Answer 1

2

Your webpack.output.path configuration is the dist directory.

The HTMLWebpackPlugin.filename is relative to the dist directory. The filename you specified would save your HTML file in the directory above dist.

Try using ./index_prod.html instead, if you want the HTML file to be saved in your dist directory..

new HtmlWebpackPlugin({
  filename: './index_prod.html',
  template: './src/template/index.ejs',
  inject: false
})
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.