After the promotion of webpac4, the node did not make an error, but the following error appeared on the page

the configuration is as follows:
const webpack = require ("webpack")
const path = require (" path")
const fs = require ("fs")
const chalk = require (" chalk")
const HtmlWebpackPlugin = require ("html-webpack-plugin")
const WebpackMd5Hash = require (" webpack-md5-hash") / / md5 to be done
const HashedModuleIdsPlugin = require (". / HashedModuleIdsPlugin") / md5 to be done
const traverseFile = require (". / tools") ". / modulesCfg")
} catch (e) {
console.log (chalk.red ("= n modulesCfg.js, not found Please refer to README.md for configuration .nn ="));
}
/ / set the port number of the system environment
process.env.port = modulesCfg.localPORT
const NODE_ENV = process.env.NODE_ENV | | "develop" / / environment original value
const webpackConfig = {
/ / devtool:" source-map",
entry: {},

// 
// [name]  entrykey

output: {

publicPath: __NODE_ENV__ === "develop" ? "/" : __NODE_ENV__ === "preProd"
  ? "//xxxErp/" : "//xxx/Erp/",
path: path.join(__dirname, "dist"),
chunkFilename: "[name].chunk.js",
filename: "[name].js"

},
resolve: {

modules: [path.resolve("src"), "node_modules"],
extensions: [".js", ".jsx"],
/**
 * 
 *  require("/Users/kkt/Documents/erp/components/index.js")
 *  require("components")
 * node_modules
 */
alias: {
  components: path.dirname(`${__dirname}/src/components/index.js`),
  utils: path.dirname(`${__dirname}/src/utils/index.js`),
  commonStyle: path.dirname(`${__dirname}/src/utils/common.style.less`),
  BussinessCom: path.dirname(`${__dirname}/src/components/BussinessCom/index.js`),
  PureCom: path.dirname(`${__dirname}/src/components/PureCom/index.js`)
}

},
mode: NODE_ENV = "develop"? "development": "production",
module: {

// modules.css/less/scss css modules
rules: [
  {
    test: /\.html$/,
    use: [
      {
        loader: "html-loader"
      }
    ]
  },
  {
    test: /modules\.css$/,
    use: ["css-loader?modules&localIdentName=[local]-[hash:base64:5]"]
  },
  {
    test: /^((?!modules).)*\.css$/,
    use: ["css-loader"]
  },
  {
    test: /modules\.less$/,
    use: ["css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]!autoprefixer-loader!less-loader"],
  },
  {
    test: /^((?!modules).)*\.less$/,
    use: [{
      loader: "style-loader" // creates style nodes from JS strings
    }, {
      loader: "css-loader" // translates CSS into CommonJS
    }, {
      loader: "less-loader" // compiles Less to CSS
    }]
  },
  {
    test: /\.(html)$/,
    use: {
      loader: "html-loader"
    }
  },
  {
    test: /\.(js|jsx)$/,
    use: ["babel-loader"],
    // exclude: /node_modules/
    include: path.join(__dirname, "src")
  },
  {
    test: /\.(jpg|png|gif|jpeg|svg)$/,
    use: "url-loader?limit=8192"
  },
  {
    test: /\.json$/,
    type: "javascript/auto",
    use: "json-loader"
  }
]

},
plugins: [

]
new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: __NODE_ENV__ === "develop" || __NODE_ENV__ === "developTruth" ? JSON.stringify("develop") : JSON.stringify("prod"),
  },
}),

],
};

if (_ _ NODE_ENV__ = "develop") {
webpackConfig.plugins.push (new webpack.HotModuleReplacementPlugin ());
} else {
webpackConfig.externals = {

)
react: "React",
  "react-dom": "ReactDOM",
  antd: "antd",
jquery: "$",
highcharts: "Highcharts",
moment: "moment",

};
if (_ _ NODE_ENV__ = "preProd") {

webpackConfig.plugins.push(
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  new webpack.NoErrorsPlugin()
)

} else {

webpackConfig.plugins.push(
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_debugger: true, // debugger
      drop_console: true // console
    }
  }),
  new webpack.NoErrorsPlugin()
)

}
}

/ *

  • distinguish between modulesCfg.dev and modulesCfg.prod file lists to prevent overwriting other people"s js or old pages
  • configure only the portal files you are developing within modulesCfg.prod

* /
if (_ _ NODE_ENV__ = "develop" | | NODE_ENV =" developTruth") {

// develop

AddEntryFile (modulesCfg.dev);
} else {

//  preProdprod

AddEntryFile (modulesCfg.prod);
}

/ *

  • now all entry files use index.entry.js files as entry files
  • only reads the entry file path from the modulesCfg.js, and generally does not need to package all the pages, so it is risky not to deal with it for the time being.
  • Optimization: if it is a page, configSingleEntry the singlefile directly. If it is a module, add all the pages of the module

* /
function AddEntryFile (entries) {
if (entries.length = = 0) {

console.log(chalk.red("\n sb? \n"));
return;

}

// filename,

for (let i = 0; I < entries.length; iPP) {

const fileName = entries[i];
// 
if (fs.existsSync(path.join(srcDir, fileName, "index.entry.js"))) {
  console.log(chalk.green("get entry js success! ", fileName));
  configSingleEntry(fileName);
} else if (fs.existsSync(path.join(srcDir, fileName)) && fs.statSync(path.join(srcDir, fileName)).isDirectory()) { //  &&  
  // 
  const _entries = traverseFile(path.join(srcDir, fileName), "entry.js").map(fileInfo => path.dirname(fileInfo.fPath).replace("src/view/", ""));
  AddEntryFile(_entries);
} else {
  console.log(chalk.red("InValid! under ", fileName, " there is no entry file! "));
  return;
}

}
}

/ *

  • configure a single file entry
  • @ param {[string]} fileName [File name]

* /
function configSingleEntry (fileName) {
webpackConfig.entry [ ${fileName} / index ] = [. / src/view/$ {fileName} / index.entry.js ];
if (_ _ NODE_ENV__ = = "develop" | | NODE_ENV = = "developTruth") {

webpackConfig.entry[`${fileName}/index`].push(
        `webpack-dev-server/client?http://localhost:${modulesCfg.localPORT}`,
        "webpack/hot/only-dev-server"
    )

}
webpackConfig.plugins.push (new HtmlWebpackPlugin ({

filename: `${fileName}/index.html`,
template: `./src/view/${fileName}/index.html`,
inject: true,
chunks: [`${fileName}/index`],
hash: false,
chunksSortMode: "dependency",

}));
}

module.exports = webpackConfig;
ask the boss to solve

  • Webpack on the Packaging of react components

    desired effect the react components developed by ourselves do not want to introduce react, when they are packaged, but want to introduce react externally . react webpack.config.js report that react is not defined so the above react does no...

  • Css pollution problem

    there are two React projects An and B, Project B is a public project, and Project A depends on Project B. they all rely on the antd component library, but with different versions. now the way to use B in An is to build, first and then introduce: <...

Menu