我正在尝试使用 HTML Webpack 插件创建一个带有静态 HTML 部分的设置，但遇到了一些错误。这是我当前的配置:
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './public'),
filename: 'app.js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'html-loader'
}],
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader', 'postcss-loader'],
})),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/assets/images/&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 4,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: /node_modules/,
include: __dirname,
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html.ejs'
}),
new ExtractTextWebpackPlugin('main.css')
],
devServer: {
contentBase: path.resolve(__dirname, './public'),
historyApiFallback: true,
inline: true,
open: true
},
devtool: 'eval-source-map'
}
module.exports = config;
if (process.env.NODE_ENV === 'production') {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin(),
new OptimizeCSSAssets()
);
}
template.html.ejs(位于./src下)
<%=require('./header.html')%>
<body>
testing schmesting
</body>
<%=require('./footer.html')%>
</html>
(footer.html 和header.html 位于./src 下)
编辑:更新代码，问题依旧:
“错误中的错误:子编译失败:
模块解析失败:意外标记 (1:0)
您可能需要适当的加载程序来处理此文件类型。
语法错误:意外标记 (1:0)
模块解析失败:意外标记 (1:2)
您可能需要一个合适的加载器来处理这种文件类型。”
最佳答案
编辑
(编辑:2017-12-20 将“装载机”移至“规则”)
默认情况下，“html-webpack-plugin”解析模板为“underscore”(也叫lodash)模板，你的“template.html”没有错，错误是webpack failed to resolve 'html -loader' 为你的“template.html”
<%= require('html-loader!./footer.html') %> ，所以你需要为webpack安装“html-loader”，并配置它:
在命令行中:
npm install html-loader
并为 webpack 配置它，编辑 webpack.config.js :
...
module: {
rules: [
// ...
{
test: /\.html$/, // tells webpack to use this loader for all ".html" files
loader: 'html-loader'
}
]
}
现在你可以运行“webpack”，你不会看到任何错误，但是生成的“index.html”不是你所期望的，因为你的模板文件有“.html”扩展名，webpack现在使用“html-loader”加载“template.html”而不是默认的“lodash loader”，为了解决这个问题，您可以将“template.html”重命名为“template.html.ejs”(或任何其他扩展名)以制作“html-webpack-plugin”回退。除了在“template.html”上有更多变化外，删除“html-loader!”来自它:
<%= require('./footer.html') %>
现在它应该可以工作了。
编辑 发布我的代码以供引用:
/src/template.html.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>template</h1>
<%=require('./footer.html')%>
</body>
</html>
/src/footer.html
<footer>this is a footer</footer>
/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: {
index: './src/js/index'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html.ejs'
})
]
}
module.exports = config;
/package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0"
}
}
/src/js/index.js
console.log("A test page!");
环境:
- 网络包 3.10.0
- npm 5.6.0
运行 webpack 后“/dist/index.html”的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>template</h1>
<footer>this is a footer</footer>
<script type="text/javascript" src="index.js"></script></body>
</html>
如您所见，“footer.html”的内容已正确插入。
旧答案
方法一: Using "es6" template
- 通过
npm install html-loader安装“html-loader” - 将“html-loader”添加到“webpack.config.js”以加载扩展名为“.html”的文件，例如:
module: { rules: [{ test: /\.html$/, loader: 'html-loader' }], }
- 添加
interpolate为 ES6 模板字符串启用插值语法的标志，如下所示:
plugins: [ new HtmlWebpackPlugin({ template: '!!html-loader?interpolate!src/template.html' }) ]
- 修改您的
template.html匹配 ES6 模板:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> template </body> ${require('./footer.html')} </html>
- 运行
webpack, 它会起作用
方法二:使用“下划线”模板
按照“方法 1”的第 1 步和第 2 步，然后:
- 将“template.html”重命名为“template.html.ejs”
- 更改
template: './src/template.html'至template: './src/template.html.ejs'在“webpack.config.js”中 - 运行网络包
关于javascript - 在 HTML Webpack 插件中使用 partials 时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47776459/