Firebase 网页包不';t生成index.html
我正在使用vue和firebase 当我厌倦了“npm运行构建”来部署firebase托管服务器时,我得到了这些文件 build.js、build.js.map、logo.png、profile.jpg 我想知道为什么它不生成index.html 所以我厌倦了HtmlWebpackPlugin,但它也不起作用 这是我的webpack.config.js 谢谢Firebase 网页包不';t生成index.html,firebase,webpack,vue.js,vuejs2,Firebase,Webpack,Vue.js,Vuejs2,我正在使用vue和firebase 当我厌倦了“npm运行构建”来部署firebase托管服务器时,我得到了这些文件 build.js、build.js.map、logo.png、profile.jpg 我想知道为什么它不生成index.html 所以我厌倦了HtmlWebpackPlugin,但它也不起作用 这是我的webpack.config.js 谢谢 var path = require('path') var webpack = require('webpack') var HtmlW
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
// webpack.config.js
plugins: [
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm.js', 'default'],
jQuery: 'jquery',
'window.jQuery': 'jquery',
$: 'jquery',
moment: 'moment',
}),
new HtmlWebpackPlugin({
hash: true,
filename: './dist/index.html' //relative to root of the application
})
]
这是我的package.json
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
看起来您没有导出最后两个插件并在没有
dist
的情况下指定html文件名,因为HtmlWebpackPlugin
应生成相对于路径的文件,以下是固定配置:
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm.js', 'default'],
jQuery: 'jquery',
'window.jQuery': 'jquery',
$: 'jquery',
moment: 'moment',
}),
new HtmlWebpackPlugin({
hash: true,
filename: 'index.html'
})
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}