Mini-css-extract-plugin: ReferenceError: window is not defined
package.json
{
"name": "",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack-dev-server --mode=development"
},
"repository": {
"type": "git",
"url": "https://gitee.com/yangjiedage/checheHomepage.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"glob": "^7.1.3",
"glob-all": "^3.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.3.1",
"mini-css-extract-plugin": "^0.4.3",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"style-loader": "^0.23.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"popper.js": "^1.14.4"
},
"description": ""
}
webpack.config.js
const path = require('path')
const devMode = process.env.NODE_ENV !== 'production'
const HtmWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const glob = require('glob-all')
const PurifyCssPlugin = require('purifycss-webpack')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: devMode ? '[name].js' : '[name].[hash:5].js',
},
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'js/jquery-2.0.2.js')
}
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true
})
]
},
module: {
rules: [
{
test: /\.css$/,
use: [
// devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].[ext]',
limit: 10000,
outputPath: 'assets/imgs'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
},
{
test: /\.(eot|woff2?|ttf|otf|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000,
name: '[name]-[hash:5].[ext]',
outputPath: 'assets/fonts'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src', 'script:src', 'link:href']
}
}
]
}
]
},
plugins: [
new PurifyCssPlugin({
paths: glob.sync([
path.join(__dirname, './template.html'),
path.join(__dirname, './src/*.js')
])
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new HtmWebpackPlugin({
filename: 'index.html',
template: 'template.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash:5].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash:5].css'
})
]
}
getting errors
(node:96841) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Hash: 8f60d876eb4cb9635979
Version: webpack 4.20.2
Time: 8994ms
Built at: 2018-09-28 14:04:48
Asset Size Chunks Chunk Names
assets/fonts/fontawesome-webfont-c8ddf.woff 88.3 KiB [emitted]
assets/imgs/car-1-d9487.jpg 46.9 KiB [emitted]
assets/imgs/car-3-37c7c.jpg 34 KiB [emitted]
assets/imgs/car-4-8b8fd.jpg 34.9 KiB [emitted]
assets/imgs/car-5-bde1b.jpg 446 KiB [emitted] [big]
assets/imgs/car-6-c4928.jpg 59.5 KiB [emitted]
assets/fonts/fontawesome-webfont-e6cf7.woff2 70.2 KiB [emitted]
assets/fonts/fontawesome-webfont-25a32.eot 74.7 KiB [emitted]
assets/imgs/car-2-6cff3.jpg 235 KiB [emitted]
assets/imgs/ajaxloader-e9623.gif 28.6 KiB [emitted]
assets/fonts/fontawesome-webfont-1dc35.ttf 149 KiB [emitted]
assets/fonts/fontawesome-webfont-d7c63.svg 382 KiB [emitted] [big]
assets/imgs/bg-5-53cec.jpg 30.7 KiB [emitted]
assets/imgs/bg-4-ca2e9.jpg 202 KiB [emitted]
app.css 56.6 KiB 0 [emitted] app
app.js 84.2 KiB 0 [emitted] app
index.html 1.16 KiB [emitted]
Entrypoint app = app.css app.js
[0] ./src/app.js 1.84 KiB {0} [built]
[1] ./js/jquery-2.0.2.js 237 KiB {0} [built]
[2] (webpack)/buildin/module.js 519 bytes {0} [built]
[3] ./css/styles.css 39 bytes {0} [built]
+ 4 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
assets/imgs/car-5-bde1b.jpg (446 KiB)
assets/fonts/fontawesome-webfont-d7c63.svg (382 KiB)
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require
ERROR in Error: /Users/jason.yang/Desktop/cheche-homepage/template.html:8934
})( window );
^
ReferenceError: window is not defined
- template.html:8934 Object.<anonymous>
/Users/jason.yang/Desktop/cheche-homepage/template.html:8934:5
- template.html:8935 Object.module.exports
/Users/jason.yang/Desktop/cheche-homepage/template.html:8935:30
- template.html:21 __webpack_require__
/Users/jason.yang/Desktop/cheche-homepage/template.html:21:30
- template.html:8953 Object.module.exports
/Users/jason.yang/Desktop/cheche-homepage/template.html:8953:18173
- template.html:21 __webpack_require__
/Users/jason.yang/Desktop/cheche-homepage/template.html:21:30
- template.html:85 core_strundefined
/Users/jason.yang/Desktop/cheche-homepage/template.html:85:18
- template.html:88
/Users/jason.yang/Desktop/cheche-homepage/template.html:88:10
- index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
[cheche-homepage]/[html-webpack-plugin]/index.js:247:28
- index.js:161 Promise.resolve.then.then.then.compiledTemplate
[cheche-homepage]/[html-webpack-plugin]/index.js:161:23
Any ideas?
yangjiedage
👍1
All 10 comments
How did you solve it?
murbanowicz
on 15 Feb 2019
@murbanowicz You are probably also loading style-loader which is normally used to embed the styles inline in the html document. Try removing that :)
sabarasaba
on 18 Feb 2019
👍138
❤38
🎉27
🚀11
😄3
@murbanowicz You are probably also loading
style-loaderwhich is normally used to embed the styles inline in the html document. Try removing that :)
you're my new hero
Totone
on 29 May 2019
😄9
Mine as well :) Thank you @sabarasaba Although my error was ReferenceError: document is not defined when trying to use the plugin. But the issue was similar I removed the vue-style-loader from the scss /sass loaders and replaced with MiniCssExtractPlugin and the issue was resolved I now have a different .css file extracted like I wanted :) Thank you!
JonathanDn
on 17 Dec 2019
👍5
@sabarasaba's answer solves this. My error was also ReferenceError: document is not defined and removing style-loader solves it.
aysiscore
on 19 May 2020
👍1
Solve this! just let "style-loader" first of all.
madChill
on 13 Jun 2020
🎉4
👍1
Removing "style-loader" also work for me. thank you.
im-singh
on 14 Jun 2020
i confirm Removing "style-loader" also work for me. thank you.
odyright
on 28 Aug 2020
I'm not using style-loader but still get this error when my css/scss using url to get a image.
anyone have a clue?
KOEI5113
on 8 Feb 2021
@murbanowicz You are probably also loading
style-loaderwhich is normally used to embed the styles inline in the html document. Try removing that :)
This has sorted me right out, thanks!
BidmarkBM
on 25 Mar 2021
Was this page helpful?
0 / 5 - 0 ratings
Related issues
elgs
路
3Comments
IdeaHunter
路
3Comments
TheHolyWaffle
路
4Comments
mike-marcacci
路
4Comments
Legends
路
4Comments
Most helpful comment
@murbanowicz You are probably also loading
style-loaderwhich is normally used to embed the styles inline in the html document. Try removing that :)