Я только что обновился до Webpack 4. Я использую модули CSS.
ОШИБКА:
ОШИБКА в ./client/src/common/accordian-component/accordian.css (./node_modules/css-loader??ref--5-1! ./ node_modules / postcss-loader / lib ?? ref - 5-2! ./ client / src / common / accordian-component / accordian.css) Сбой сборки модуля: TypeError: Невозможно прочитать свойство 'context' для undefined вОбъект.(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57) в Array.map () в Object.(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31) в / Users / phillipjones / Workspace / sl_pathfinder / website / node_modules / css-loader / lib / processCss.js: 200: 3 из предыдущего события: в Promise.then (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) в Object.loader (/ Users / phillipjones)/Workspace/sl_pathfinder/website/node_modules/postcss-loader/lib/index.js:96:6) @ ./client/src/common/accordian-component/accordian.css 2: 14-160 21: 1-42:3 21: 158-42: 2 22: 19-165 @ ./client/src/common/accordian-component/accordian-item.jsx @ ./client/src/common/accordian-component/all-components.js @./client/src/common/accordian-component/accordian-component.jsx @ ./client/src/common/index.js @ ./client/src/views/main-view/all-components.js @ ./client / src / views / main-view / main-view.jsx @ ./client/src/views/index.js @ ./client/src/routes/index.jsx @ ./client/src/App.jsx @multi ./client/src/App.jsx
webpack.config.js
require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
functions: require('./postcss-functions') }); // eslint-disable-line
// const fs = require('fs');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
// console.log({ nodeEnv });
let mode = 'production';
if (nodeEnv !== 'production') {
mode = 'development';
}
// const api_base_url = process.env.API_BASE_URL || 'http://localhost:8000/api';
// Common rules
const rules = [
{
test: /\.jsx?$/,
use: ['babel-loader'],
include: /(pathfinder-common|src)/,
},
{
test: /\.css$/i,
include: /client/,
use: [
'style-loader',
{ loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoaders: 1,
camelCase: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
plugins: [
importPlugin(),
autoprefixer({ browsers: ['last 2 versions'] }),
postcssFunctions,
],
},
},
],
},
{
test: /\.woff2?/,
loader: 'url-loader',
options: {
name: '[path][name].[ext]?[hash]',
mimetype: 'application/font-woff',
},
},
{
test: /\.(jpe?g|gif|svg|ico|ttf|otf|woff|woff2)(\?[a-z0-9=&.]+)?$/i,
loader: 'url-loader',
options: {
name: '[path][name].[ext]?[hash]',
},
},
{
test: /\.png$/,
loader: 'url-loader?mimetype=image/png',
options: {
name: '[path][name].[ext]?[hash]',
},
},
];
module.exports = {
mode,
context: __dirname,
devtool: 'cheap-module-source-map',
entry: ['./client/src/App.jsx'],
output: {
path: path.resolve(__dirname, './client/public'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: [path.resolve(__dirname, 'node_modules')],
symlinks: true,
},
plugins: [
// new ExtractTextPlugin('ml-common.css'),
new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({ 'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }),
],
module: {
rules,
},
devServer: {
contentBase: path.resolve(__dirname, './client/public'),
hot: true,
quiet: false,
noInfo: false,
publicPath: 'http://localhost:8000',
overlay: {
warnings: true,
errors: true,
},
},
};