配置 MiniCssExtractPlugin
Configure MiniCssExtractPlugin
我有一个应用程序必须在 IE9 上运行,因为有几个客户仍在使用它。这个周末,我想我会设置 webpack 以便我可以使用一些 ES6 功能。在开始对项目进行更改之前,我创建了一个示例项目只是为了尝试一下。我 运行 在安装过程中遇到了一些问题。
我阅读了文档并修改了 webpack.config.js 文件,但无法正常工作。
这是我的 webpack.config.js 文件:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const publicPath = '/';
module.exports = {
mode: 'development',
'entry': './wwwroot/source/app.js',
'output': {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js',
publicPath: publicPath
},
//optimization: {
// minimizer: [new UglifyJsPlugin()]
//},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
module: {
rules: [
{
test: /\.css$/i,
exclude: /(node_modules|bower_components)/,
include: "/wwwroot/css/",
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env']
}
}
}
]
}
};
这是我的 app.js 文件,我在其中导入了我的 js 和 css 文件
//import $ from 'jquery';
import ES6Lib from './es6codelib';
//import 'bootstrap/dist/css/bootstrap.min.css'; //I could not get bootstrap.min.css to work, I had to move it into the css folder. Then, it starts working correctly.
import '../css/bootstrap.min.css';
import '../css/site.css';
require('./lib');
document.getElementById("fillthis").innerHTML = getText();
$('#fillthiswithjquery').html('Filled by Jquery!');
let myES6Object = new ES6Lib();
$('#fillthiswithes6lib').html(myES6Object.getData());
这是我的解决方案资源管理器的屏幕截图
这是我的package.json文件
{
"name": "examplewetpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.0.4",
"bootstrap": "^4.4.1",
"css-loader": "^3.5.2",
"jquery": "^3.5.0",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"serialize-javascript": "^3.0.0",
"style-loader": "^1.1.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"npm": "^6.14.4"
}
}
日志文件错误信息:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'c:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'wbp'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.13.0
4 verbose run-script [ 'prewbp', 'wbp', 'postwbp' ]
5 info lifecycle examplewetpack@1.0.0~prewbp: examplewetpack@1.0.0
6 info lifecycle examplewetpack@1.0.0~wbp: examplewetpack@1.0.0
7 verbose lifecycle examplewetpack@1.0.0~wbp: unsafe-perm in lifecycle true
8 verbose lifecycle examplewetpack@1.0.0~wbp: PATH: C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;c:\Users\Kestner\source\repos\examplewetpack\examplewetpack\node_modules\.bin;c:\Users\Kestner\bin;.;C:\Program Files (x86)\Git\local\bin;C:\Program Files (x86)\Git\mingw\bin;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\bin;c:\Python27\;c:\Python27\Scripts;c:\Program Files (x86)\Common Files\Oracle\Java\javapath;c:\ProgramData\Oracle\Java\javapath;c:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;c:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;c:\Windows\system32;c:\Windows;c:\Windows\System32\Wbem;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;c:\Program Files\Java\jdk1.8.0\bin;c:\Program Files (x86)\GtkSharp.12\bin;c:\Program Files\Microsoft\Web Platform Installer\;c:\Program Files\Microsoft SQL Server0\DTS\Binn\;c:\Program Files (x86)\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files (x86)\Microsoft SQL Server0\Tools\Binn\ManagementStudio\;c:\Program Files (x86)\Microsoft SQL Server0\DTS\Binn\;C:\Program Files (x86)\Git\cmd;c:\Dwimperl\perl\bin;c:\Dwimperl\perl\site\bin;c:\Dwimperl\c\bin;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Git\cmd;c:\Program Files (x86)\Microsoft SDKs\TypeScript.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\dotnet\;c:\Program Files\Microsoft OLE DB Provider for DB2\system;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\Microsoft SQL Server\Client SDK\ODBC0\Tools\Binn\;c:\Program Files\nodejs\;c:\ProgramData\chocolatey\bin;c:\Program Files (x86)\Brackets\command;c:\Users\Kestner\.dotnet\tools;c:\Users\Kestner\AppData\Local\Programs\Fiddler;c:\Users\Kestner\AppData\Roaming\npm;c:\Users\Kestner\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle examplewetpack@1.0.0~wbp: CWD: c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
10 silly lifecycle examplewetpack@1.0.0~wbp: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle examplewetpack@1.0.0~wbp: Returned: code: 2 signal: null
12 info lifecycle examplewetpack@1.0.0~wbp: Failed to exec wbp script
13 verbose stack Error: examplewetpack@1.0.0 wbp: `webpack`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:210:5)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:210:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid examplewetpack@1.0.0
15 verbose cwd c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
16 verbose Windows_NT 6.1.7601
17 verbose argv "c:\Program Files\nodejs\node.exe" "C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "wbp"
18 verbose node v12.13.0
19 verbose npm v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error examplewetpack@1.0.0 wbp: `webpack`
22 error Exit status 2
23 error Failed at the examplewetpack@1.0.0 wbp script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
这是错误消息的另一个屏幕截图:
我想通了。我不确定我是否完全理解发生了什么。我将不得不继续玩它,以便完全掌握正在发生的事情。
这是我的 webpack.config.js 文件现在的样子。
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
'entry': './wwwroot/source/app.js',
'output': {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
我不得不删除评论并进行如下所示的优化更改
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
}
我必须进行的第一个更改结束
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
module: {
rules: [
{
test: /\.css$/i,
exclude: /(node_modules|bower_components)/,
我删除了 include 和 sideEffects: true 尽管 sideEffects 不是问题。添加 include 时,它抛出错误,整个 bootstra.min.css 在屏幕上显示为红色。
如下所示进行了小的修改。在进行这些更改后,它按预期创建了文件。
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env']
}
}
}
]
}
};
我有一个应用程序必须在 IE9 上运行,因为有几个客户仍在使用它。这个周末,我想我会设置 webpack 以便我可以使用一些 ES6 功能。在开始对项目进行更改之前,我创建了一个示例项目只是为了尝试一下。我 运行 在安装过程中遇到了一些问题。 我阅读了文档并修改了 webpack.config.js 文件,但无法正常工作。
这是我的 webpack.config.js 文件:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const publicPath = '/';
module.exports = {
mode: 'development',
'entry': './wwwroot/source/app.js',
'output': {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js',
publicPath: publicPath
},
//optimization: {
// minimizer: [new UglifyJsPlugin()]
//},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
module: {
rules: [
{
test: /\.css$/i,
exclude: /(node_modules|bower_components)/,
include: "/wwwroot/css/",
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env']
}
}
}
]
}
};
这是我的 app.js 文件,我在其中导入了我的 js 和 css 文件
//import $ from 'jquery';
import ES6Lib from './es6codelib';
//import 'bootstrap/dist/css/bootstrap.min.css'; //I could not get bootstrap.min.css to work, I had to move it into the css folder. Then, it starts working correctly.
import '../css/bootstrap.min.css';
import '../css/site.css';
require('./lib');
document.getElementById("fillthis").innerHTML = getText();
$('#fillthiswithjquery').html('Filled by Jquery!');
let myES6Object = new ES6Lib();
$('#fillthiswithes6lib').html(myES6Object.getData());
这是我的解决方案资源管理器的屏幕截图
这是我的package.json文件
{
"name": "examplewetpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.0.4",
"bootstrap": "^4.4.1",
"css-loader": "^3.5.2",
"jquery": "^3.5.0",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"serialize-javascript": "^3.0.0",
"style-loader": "^1.1.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"npm": "^6.14.4"
}
}
日志文件错误信息:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'c:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'wbp'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.13.0
4 verbose run-script [ 'prewbp', 'wbp', 'postwbp' ]
5 info lifecycle examplewetpack@1.0.0~prewbp: examplewetpack@1.0.0
6 info lifecycle examplewetpack@1.0.0~wbp: examplewetpack@1.0.0
7 verbose lifecycle examplewetpack@1.0.0~wbp: unsafe-perm in lifecycle true
8 verbose lifecycle examplewetpack@1.0.0~wbp: PATH: C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;c:\Users\Kestner\source\repos\examplewetpack\examplewetpack\node_modules\.bin;c:\Users\Kestner\bin;.;C:\Program Files (x86)\Git\local\bin;C:\Program Files (x86)\Git\mingw\bin;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\bin;c:\Python27\;c:\Python27\Scripts;c:\Program Files (x86)\Common Files\Oracle\Java\javapath;c:\ProgramData\Oracle\Java\javapath;c:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;c:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;c:\Windows\system32;c:\Windows;c:\Windows\System32\Wbem;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;c:\Program Files\Java\jdk1.8.0\bin;c:\Program Files (x86)\GtkSharp.12\bin;c:\Program Files\Microsoft\Web Platform Installer\;c:\Program Files\Microsoft SQL Server0\DTS\Binn\;c:\Program Files (x86)\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files (x86)\Microsoft SQL Server0\Tools\Binn\ManagementStudio\;c:\Program Files (x86)\Microsoft SQL Server0\DTS\Binn\;C:\Program Files (x86)\Git\cmd;c:\Dwimperl\perl\bin;c:\Dwimperl\perl\site\bin;c:\Dwimperl\c\bin;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Microsoft SQL Server0\Tools\Binn\;c:\Program Files\Git\cmd;c:\Program Files (x86)\Microsoft SDKs\TypeScript.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\dotnet\;c:\Program Files\Microsoft OLE DB Provider for DB2\system;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\Microsoft SQL Server\Client SDK\ODBC0\Tools\Binn\;c:\Program Files\nodejs\;c:\ProgramData\chocolatey\bin;c:\Program Files (x86)\Brackets\command;c:\Users\Kestner\.dotnet\tools;c:\Users\Kestner\AppData\Local\Programs\Fiddler;c:\Users\Kestner\AppData\Roaming\npm;c:\Users\Kestner\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle examplewetpack@1.0.0~wbp: CWD: c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
10 silly lifecycle examplewetpack@1.0.0~wbp: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle examplewetpack@1.0.0~wbp: Returned: code: 2 signal: null
12 info lifecycle examplewetpack@1.0.0~wbp: Failed to exec wbp script
13 verbose stack Error: examplewetpack@1.0.0 wbp: `webpack`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:210:5)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:210:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid examplewetpack@1.0.0
15 verbose cwd c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
16 verbose Windows_NT 6.1.7601
17 verbose argv "c:\Program Files\nodejs\node.exe" "C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "wbp"
18 verbose node v12.13.0
19 verbose npm v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error examplewetpack@1.0.0 wbp: `webpack`
22 error Exit status 2
23 error Failed at the examplewetpack@1.0.0 wbp script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
这是错误消息的另一个屏幕截图:
我想通了。我不确定我是否完全理解发生了什么。我将不得不继续玩它,以便完全掌握正在发生的事情。 这是我的 webpack.config.js 文件现在的样子。
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
'entry': './wwwroot/source/app.js',
'output': {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
我不得不删除评论并进行如下所示的优化更改
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
}
我必须进行的第一个更改结束
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
module: {
rules: [
{
test: /\.css$/i,
exclude: /(node_modules|bower_components)/,
我删除了 include 和 sideEffects: true 尽管 sideEffects 不是问题。添加 include 时,它抛出错误,整个 bootstra.min.css 在屏幕上显示为红色。 如下所示进行了小的修改。在进行这些更改后,它按预期创建了文件。
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env']
}
}
}
]
}
};