![](/img/trans.png)
[英]html-webpack-plugin not inject js file into index.html when using webpack-dev-server
[英]Using html-webpack-plugin to generate an index.html file in Webpack (project using vue-simple boilerplate)
每當我在Webpack中構建應用程序時,我都試圖生成自己的index.html文件,為此,我安裝了html-webpack-plugin 。
我了解,為了在dist文件夾中生成index.html文件,我需要在webpack.config.js文件中包含以下內容:
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new HtmlWebpackPlugin(), // creates an index.html file
],
使用以上設置,它應該生成以下內容,這是我想要的輸出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="build.js"></script></body>
</html>
不幸的是,我一直在使用vue-simple Webpack樣板構建我的VueJS學習項目,結果,它在輸出部分中有一個publicPath條目:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js',
}
通過上述設置,html-webpack-plugin可以理解地在dist文件夾的index.html文件中生成以下腳本標簽,這不是我所需要的,因為src現在指向“ /dist/build.js”。
<script type="text/javascript" src="/dist/build.js"></script></body>
如果從輸出設置中刪除publicPath,則由於一切中斷,因此無法從開發服務器加載頁面。 我讀了這篇有關publicPath的文章,但是我仍然不確定要實現自己的目標應該做什么,因為所有事情都是由樣板設置的。 在構建時不破壞開發服務器上的任何內容的情況下,應如何編輯webpack.config.js文件以生成所需的index.html文件?
以下是我完整的webpack.config設置:
const path = require('path');
const webpack = require('webpack');
require("babel-polyfill"); // for async await
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// babel-polyfill for async await
// entry: ["babel-polyfill", "./src/main.js"],
entry: {
build: ["babel-polyfill", "./src/main.js"]
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js', // this will output as build.js
},
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
}, {
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
include: '/src/assets/images',
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
},
plugins: [
new webpack.ProvidePlugin({ // this injects the following into .vue files
_: "lodash",
math: "mathjs",
moment: "moment",
axios: "axios",
Chart: "chart.js",
firebase: "firebase",
}),
new HtmlWebpackPlugin(), // creates an index.html file in dist
],
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
})
]);
}
下面是我的文件夾結構:
您也可以將vue-cli用於腳手架。 (在這里閱讀vue-cli的vue文檔https://vuejs.org/2015/12/28/vue-cli/ )
以下內容將為您提供完整的預配置webpack配置:
vue init webpack project-name
然后,您可以使用npm run build
或yarn build
,它將在“ dist”文件夾中生成index.html。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.