开发Three.js WebApp，无法在webpack.config中引入webpack用ProvidePlugin怎么办？

嘿，我来帮你搞定这个头疼的问题！你没法在webpack.config.js里成功require('webpack')，大概率是因为Webpack的安装方式不对，或者配置里有一些版本兼容的小问题。下面是一步步的解决方案：

1. 确保Webpack作为本地依赖安装 #

很多人会只全局安装Webpack，但Webpack配置文件里的require('webpack')是从项目本地的node_modules里查找模块的。所以先执行这个命令，把Webpack装到项目依赖里：

npm install webpack webpack-cli --save-dev

（如果用Yarn的话就是yarn add webpack webpack-cli --dev）

注：Webpack 4及以上版本需要单独安装webpack-cli，因为命令行工具被拆分出来了，这一步别漏掉！

2. 修正你的Webpack配置文件 #

你的代码里有两处需要调整的地方：一是Webpack 2+版本已经用rules替代了旧的loaders字段，二是要正确添加ProvidePlugin到plugins数组里。修正后的完整配置示例如下：

var path = __dirname; 
const webpack = require('webpack'); 

module.exports = { 
  entry: { 
    main: './main.js' 
  }, 
  output: { 
    path: __dirname + '/dist/', 
    filename: '[name].bundle.js' 
  }, 
  // 添加ProvidePlugin到plugins数组
  plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three' // 这样你在业务代码里就能直接用THREE，不用每次手动import啦
    })
  ],
  module: { 
    // 把loaders改成rules（Webpack 2+的标准写法）
    rules: [ 
      { 
        test: /\.js$/, 
        loader: 'babel-loader', // 补全你之前没写完的loader名称
        exclude: /node_modules/ // 排除node_modules目录，提升打包速度
      } 
    ] 
  }
};

3. 用本地Webpack运行打包 #

如果之前习惯用全局Webpack命令，建议改成用项目本地的版本，避免版本不一致导致的问题。你可以在package.json里添加脚本：

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development"
}

之后运行npm run build就能执行生产环境打包，npm run dev执行开发环境打包。

4. 极端情况的排查 #

如果上面的步骤都试过还是不行，试试：

• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install），彻底重装依赖

内容的提问来源于stack exchange，提问作者Eduardo_DM