从 3

问题描述

我最近从 webpack 3 迁移到 5 并根据建议进行了一些更改，但是在这次升级之后，构建失败并且服务器无法启动。这是我的 webpack 文件

const path = require('path')
const webpack = require('webpack')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')

const libraryBaseStyles = glob.sync('./library/basics/**/styles.scss')
const libraryAllStyles = glob.sync('./library/**/styles.scss',{
  ignore: ['./library/basics/**/styles.scss'],})

const isProd = process.env.NODE_ENV === 'production'

let externals = []
let rules = []
let entries = {}
let pluginsBabel = ['transform-runtime','lodash']
let plugins = [
  new ExtractTextPlugin({
    // define where to save the file
    filename: 'css/[name].css',allChunks: true,}),]
let output = {
  path: path.resolve(__dirname,isProd ? './dist' : './public'),filename: 'js/[name].js',}

if (isProd) {
  plugins.push(
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /index.css$/g,cssprocessor: require("cssnano"),cssprocessorOptions: {
        discardComments: { removeAll: true },autoprefixer: {
          browsers: ["last 2 versions","Safari > 8"],add: true,},canPrint: true,new webpack.ContextReplacementPlugin(
      /moment[\/\\]locale$/,/(fr\.js|nl-be|nl\.js|en-gb|de\.js)/
    ),new webpack.LoaderOptionsPlugin({
      minimize: true,debug: false,new FileManagerPlugin({
      onEnd: {
        copy: [
          { source: "dist/css/index.css",destination: "dist/css/index.scss" },{ source: "public/fonts",destination: "dist/fonts" },],})
  );

  entries.index = libraryBaseStyles
    .concat(libraryAllStyles)
    .concat(['./library/index.js'])

  // https://webpack.js.org/guides/author-libraries/
  output.library = 'nmbs-redesign-website'
  output.libraryTarget = 'umd'

  externals = [
    'autosize',// 'babel-polyfill','gsap','hammerjs','imagesloaded','inputmask','masonry-layout','moment','packery','picturefill','pikaday','prismjs','promise-polyfill','scrollmonitor','whatwg-fetch','wicg-inert',]
} else {
  rules.push({
    test: /\.svg$/,include: path.join(__dirname,'./library/basics/Icons'),loaders: [
      'svg-sprite-loader?' +
        JSON.stringify({
          name: 'icon-[name]',prefixize: true,'svgo-loader?' +
        JSON.stringify({
          plugins: [
            {removeTitle: true},{convertPathData: false},{removeUselessstrokeAndFill: true},})

  plugins.push(new webpack.LoaderOptionsPlugin({options: {}}))

  entries.library = libraryBaseStyles
    .concat(libraryAllStyles)
    .concat(['./library/index.js'])
  entries.docs = glob.sync('./docs/**/styles.scss').concat(['./docs/index.js'])
}

rules.push(
  {
    test: /\.js$/,// Default
    // exclude: [path.resolve(__dirname,'node_modules')],// Specific
    include: [
      path.resolve(__dirname,'library'),path.resolve(__dirname,'docs'),'node_modules/dom7'),'node_modules/ssr-window'),'node_modules/swiper'),loader: 'babel-loader',query: {
      plugins: pluginsBabel,presets: [
        [
          'env',{
            targets: {
              browsers: ['last 2 versions','Safari > 8'],debug: true,useBuiltIns: true,'latest','stage-2',// Loaders for other file types can go here
  {
    test: /\.scss$/,loader: ExtractTextPlugin.extract({
      fallback: 'style-loader',use: [
        {loader: 'css-loader',options: {url: false}},{loader: 'sass-loader'},}
)

console.log('\nWebpack ' + process.env.NODE_ENV + '\n (isProd: ' + isProd + ')')
module.exports = {
  entry: entries,output: output,externals: externals,module: {
    rules: rules,plugins: plugins,devtool: isProd ? "source-map" : "inline-source-map",devServer: {
    contentBase: path.join(__dirname,"public/"),compress: true,overlay: true,inline: false,port: 3000,};

我的 Package.json

  "name": "es6-library","version": "6.0.15","description": "Pattern Library","main": "dist/js/index.js","module": "library/index.js","scripts": {
    "docs": "gulp watch:docs","nj": "gulp nunjucks","dev": "cross-env NODE_ENV=local webpack serve","build": "cross-env NODE_ENV=local ./node_modules/.bin/webpack && npm run versions","build-prod": "cross-env NODE_ENV=production ./node_modules/.bin/webpack && npm run versions","dist": "cross-env NODE_ENV=production ./node_modules/.bin/webpack && npm run versions","versions": "node -p \"process.env.npm_package_version\" > ./public/version-npm.txt && node -p \"require('moment')().format('MMM/DD/YYYY HH:mm')\" > ./public/version.txt","optimizesvg": "find ./library/basics/Icons -name '*.svg' -exec ./node_modules/.bin/svgo {} \\;","build-push-staging": "npm run build && git add . && git commit -m \"build `date +\"%d/%m/%Y\"`\" && git push","build-push-test": "npm run build && git add . && git commit -m \"require('moment')().format('MMM/DD/YYYY')\" && git push origin origin/test","build-for-release": "npm run build-prod && npm run dist && git add . && git commit -m \"compile dist \"require('moment')().format('MMM/DD/YYYY')\"","build-for-Deploy": "npm run build && git add . && git commit -m \"build \"require('moment')().format('MMM/DD/YYYY')\"","build-push-production": "npm run build-for-Deploy && git push","dist-push-production": "npm run build-for-release && git push && npm publish"
  },"author": "Amit","license": "ISC","dependencies": {
    "autosize": "^4.0.2","babel-polyfill": "^6.26.0","fuse.js": "^6.4.6","gsap": "^3.6.1","hammerjs": "^2.0.8","imagesloaded": "^4.1.4","inputmask": "4.0.9","masonry-layout": "^4.2.2","moment": "^2.26.0","node-sass": "^5.0.0","packery": "^2.1.2","picturefill": "^3.0","prismjs": "^1.15.0","promise-polyfill": "^8.0","scrollmonitor": "^1.2","swiper": "^4.4.1","whatwg-fetch": "^2.0.4","wicg-inert": "^2.0"
  },"devDependencies": {
    "babel-cli": "^6.18.0","babel-core": "^6.26.3","babel-eslint": "^6.0.4","babel-loader": "^7.1.5","babel-plugin-lodash": "^3.3.4","babel-plugin-transform-runtime": "^6.23.0","babel-polyfill": "^6.8.0","babel-preset-env": "^1.6.1","babel-preset-latest": "^6.24.1","babel-preset-stage-2": "^6.24.1","babel-register": "^6.26.0","cross-env": "^7.0.3","css-loader": "^5.2.4","cssnano": "^5.0.2","eslint": "^4.19.1","extract-text-webpack-plugin": "^3.0.2","file-loader": "^1.1.11","filemanager-webpack-plugin": "^4.0.0","glob": "^7.1.3","gulp": "^3.9.1","gulp-nunjucks-render": "git+https://github.com/carlosl/gulp-nunjucks-render.git","gulp-plumber": "^1.2.0","optimize-css-assets-webpack-plugin": "^3.2.0","sass-loader": "6.0.7","style-loader": "^0.21.0","svg-sprite-loader": "0.3.1","svgo": "^1.1.1","svgo-loader": "^2.2.0","webpack": "^5.36.2","webpack-cli": "^4.6.0","webpack-dev-server": "^3.11.2"
  }
}

这是我尝试启动服务器时遇到的错误（npm run dev）

Webpack 本地 (isProd: 假) [webpack-cli] 无效的配置对象。已使用与 API 架构不匹配的配置对象初始化 Webpack。

• configuration.module.rules[2] 应该是以下之一： ["..." |对象{编译器？，依赖？，描述数据？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？， mimetype?,oneOf?,options?,parser?,realResource?,resolve?,resource?,resourceFragment?,resourceQuery?,rules?,sideEffects?,test?,type?,采用？ },...] -> 规则。 细节：
  • configuration.module.rules[2].loader 应该是一个非空字符串。 -> 加载器请求。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）