`npm运行生成`不生成` index.html`
在我的Vue.JS项目中,运行以下命令后:`npm运行生成`不生成` index.html`,npm,vue.js,Npm,Vue.js,在我的Vue.JS项目中,运行以下命令后: npm run build dist目录中没有index.html文件: 我的webpack.base.config.js文件是: const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry
npm run build
dist目录中没有index.html
文件:
我的webpack.base.config.js文件是:
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')
}
}
};
我的webpack.prod.config.js
代码如下:
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
})
]
});
编辑-1
$ npm run build
> wx_backup@1.0.0 build /Users/lkl/Desktop/my-project/web/wx_backup
> webpack --progress --hide-modules --config webpack.prod.config.js
您的webpack.output.path
配置是dist
目录
HTMLWebpackPlugin.filename
与dist
目录相关。指定的文件名将把HTML文件保存在dist
上方的目录中
如果希望html文件保存在dist
目录中,请尝试改用/index\u prod.html
new HtmlWebpackPlugin({
filename: './index_prod.html',
template: './src/template/index.ejs',
inject: false
})
您能告诉我们您的npm运行构建调用了哪个命令吗?
?请参阅我的编辑。兄弟