我有 webpack
(v3.5.6)构建使用 html-loader
并处理多个HTML文件,使用 url-loader
将较小的图像嵌入到HTML中 . 配置完全适用于构建,但在使用 Webpack Dev Server
(v2.7.1)时失败,因为此时 Webpack Dev Server
不存在't seem to ignore comments in source HTML files. It tries to require resources from commented sections of HTML and some of those resources don't .
以下是 Webpack Dev Server
的示例错误:
ERROR in ./about-us.html
Module not found: Error: Can't resolve './img/old-image.png' in 'C:\Users\usr\dev\www'
@ ./about-us.html
@ ./entry.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js
我的(未完成的) webpack
配置如下:
webpack.common.js :
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const env = process.env.NODE_ENV;
module.exports = {
entry: './entry.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
{
loader: 'extract-loader',
},
{
loader: 'html-loader',
options: {
attrs: ['img:src'],
interpolate: true,
},
},
],
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/,
use: env === 'production' ?
ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
}) : ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: '[path][name].[ext]'
}
}]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
},
},
plugins: [
new CleanWebpackPlugin(['dist', 'build'])
],
};
webpack.dev.js :
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devServer: {
contentBase: './dist'
},
});
webpack.prod.js:
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin(),
new ExtractTextPlugin({
filename: 'styles.css'
})
]
});
entry.js:
require('./about-us.html');
require('./index.html');
require('./css/style.css');
require('./js/sidebar.js');
1 回答
您必须在html-loader的配置中激活注释缩小 .