I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
Can you share your ejs webpack config rule?
Originally posted by @ZacxDev in #46 (comment)
`const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinCssExtractPlugin = require("mini-css-extract-plugin"); // 将css代码提取为独立文件的插件
const MediaQueryPlugin = require('media-query-plugin');
module.exports = {
mode: 'production',
entry: [
'./src/index.js'
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /.s[ac]ss$/i,
use: [
{
loader: MinCssExtractPlugin.loader, // 将处理后的CSS代码提取为独立的CSS文件,可以只在生产环境中配置,但我喜欢保持开发环境与生产环境尽量一致
options: {
publicPath: '/assets/',
// only enable hot in development
hmr: true,
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader', // CSS加载器,使webpack可以识别css文件
MediaQueryPlugin.loader,
'postcss-loader', // 承载autoprefixer功能,为css添加前缀
'sass-loader', // Compiles Sass to CSS
],
},
{
test: /.css$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
},
'extract-loader',
'css-loader',
'postcss-loader']
},
{
test: /.(jpg|png|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
}
},
{
test: /.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.ejs',
inject: true,
minify: {
collapseWhitespace: true
}
}),
new webpack.HotModuleReplacementPlugin(),
new MinCssExtractPlugin(),
new MediaQueryPlugin({
include: [
'style',
],
queries: {
'print': 'print',
'not print': 'not-print'
}
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
overlay: true,
port: 4550,
open: true,
hot: true
}
};
`
{
"name": "resume",
"version": "1.0.0",
"description": "个人简历",
"main": "index.js",
"repository": "https://github.com/songxingguo/resume.git",
"author": "songxingguo [email protected]",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode=development",
"build": "webpack --mode=production"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ejs-compiled-loader": "^3.0.0",
"ejs-loader": "^0.5.0",
"extract-loader": "^2.0.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"media-query-plugin": "^1.3.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-px2rem-exclude": "0.0.6",
"postcss-url": "^8.0.0",
"px2rem-loader": "^0.1.9",
"raw-loader": "^0.5.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"fs": "0.0.1-security",
"lib-flexible": "^0.3.2"
}
}
thank you