配置 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']
                }
            }
        }
        ]
    }
};