Настроить MiniCssExtractPlugin - PullRequest
Новая
       27

Настроить MiniCssExtractPlugin

0 голосов
/ 19 апреля 2020

У меня есть приложение, которое должно работать на IE9, потому что несколько клиентов все еще используют его. В эти выходные я решил настроить веб-пакет, чтобы использовать некоторые функции ES6. Я создал пример проекта, просто чтобы промочить ноги, прежде чем я начал вносить изменения в проект. Я столкнулся с несколькими проблемами во время установки. Я прочитал документ и изменил файл webpack.config. js, но не могу заставить его работать.

Вот мой файл webpack.config. js file: 

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

Это мое приложение. js файл, в который я импортировал свой js и css file 

//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());

Это скриншот моего обозревателя решений

enter image description here

Это мой пакет. 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\2.12\bin;c:\Program Files\Microsoft\Web Platform Installer\;c:\Program Files\Microsoft SQL Server\110\DTS\Binn\;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;c:\Program Files\Microsoft SQL Server\110\Tools\Binn\;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;c:\Program Files (x86)\Microsoft SQL Server\110\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 Server\120\Tools\Binn\;c:\Program Files\Microsoft SQL Server\130\Tools\Binn\;c:\Program Files\Git\cmd;c:\Program Files (x86)\Microsoft SDKs\TypeScript\1.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\ODBC\170\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 ]

Вот еще один скриншот как часть сообщения об ошибке:

enter image description here

1 Ответ

0 голосов
/ 20 апреля 2020

Я смог понять это. Я не уверен, что полностью понимаю, что происходит. Мне придется продолжать играть с ним, чтобы полностью понять, что происходит. Вот как выглядит мой файл 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, хотя побочные эффекты не были проблемой. Когда был добавлен 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']
                }
            }
        }
        ]
    }
};
...