尝试从css迁移到scss并将所有加载程序放置在我的Webpack中,但它给了我这个错误:TypeError:this [module_type]不是childCompiler.runAsChild的函数。我需要所有的scss文件执行与css文件相同的功能。我最近添加了minicssloader和/.module.s(a|c)ss$/,并测试:/.s(a|c)ss$/,此后开始出现错误。
const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HashPath = require("./react/.compile/index.js");
const cesiumSource = "../../../node_modules/cesium/Source";
const cesiumBuild = "../../../node_modules/cesium/Build/Cesium";
const cesiumWorkers = "../Build/Cesium/Workers";
const styleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === "development";
module.exports = {
entry: {
"common": [path.resolve(__dirname, "./react/common.js")],
//more lines of code
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: 5,
uglifyOptions: {
compress: { warnings: false }
}
})
],
splitChunks: {
cacheGroups: {
vendor: {
chunks: "initial",
test: "vendor",
name: "vendor",
enforce: true
}
}
}
},
resolve: {
alias: {
"cesium": path.resolve(__dirname, cesiumSource),
"images": path.resolve(__dirname, "assets/static/images")
},
extensions: [".js", ".jsx", ".scss"]
},
output: {
path: path.join(__dirname, "assets", "build"),
publicPath: "/assets/build/",
filename: "[name].[hash].js",
sourcePrefix: ""
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: "empty"
},
plugins: [
new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), cesiumWorkers), to: "Workers" }]),
new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), "Assets"), to: "Assets" }]),
new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), "Widgets"), to: "Widgets" }]),
new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumBuild), "Widgets"), to: "Widgets" }]),
new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/assets/build/") }),
new CleanWebpackPlugin([
path.join(__dirname, "assets", "build", "*.js"),
path.join(__dirname, "assets", "manifest.json")],
{ root: __dirname, verbose: true, dry: false, exclude: [] }
),
new HashPath(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new styleLintPlugin({
configFile: './.stylelintrc.json',
context: 'src',
files: "src/**/*.scss",
failOnError: false,
syntax: "scss",
emitErrors: true,
quiet: false
}),
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
],
module: {
unknownContextRegExp: /\.js$/,
unknownContextCritical: false, // disable dynamic requires for .js files
rules: [
{
test: /\.module\.s(a|c)ss$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
camelCase: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
// Lints files with ESLint before compiling
{
enforce: "pre",
test: /\.jsx?$/,
exclude: /(node_modules|thirdparty)/,
loader: "eslint-loader",
},
// Babel compiler to compile ES6/ES2015 code into plain old JavaScript
// Once ES2015 gains more support in browsers this could probably be replaced with with the plain old React loader
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015", "react", "stage-2"],
plugins: ["transform-object-rest-spread"],
}
},
// CSS loader for loading CSS from JS
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-import')(),
require('stylelint')()
]
}
}
]
},
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
use: [
"file-loader?hash=sha512&digest=hex&name=[name].[ext]",
"image-webpack-loader?{mozjpeg: {progressive: true},gifsicle: {interlaced: false},optipng: {optimizationLevel: 7},pngquant: {quality: '65-90',speed: 4}}"
]
},
// Needed to load Bootstrap from NPM
// Loaders for a bunch of font files
{
test: /bootstrap\/js\//,
use: ["imports-loader?jQuery=jquery"]
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: ["file-loader"]
},
{
test: /\.swf$/,
use: ["file-loader?name=[path][name].[ext]"]
},
{
test: /vtt\.js$/,
use: ["file-loader?name=[path][name].[ext]"]
},
{
test: /\.style.js$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } }
]
}
enter code here
]
}
};