自己配置使用webpack过程中遇到的常见错误, 小本子记录下来, 后续也可以做个参考.

更新

[2019-1-21]

Added

  • Initial release

[2019-4-26]

Changed

  • 更换文章标题为webpack猎奇系列
  • 文章格式调整

[2021-1-25]

Changed

  • 优化文章格式

一、打包ts报错

Module not found: Error: Can’t resolve ‘./components/hello’ in ‘D:\Code\webpack_study\first\src

问题原因: import导入ts, tsx, js, jsx等模块时, 默认不会携带后缀名, 导致webpack无法解析.

1
import { sayHello } from './components/Hello';

解决办法: webpack.config中增加resolve配置项.

1
2
3
4
5
6
7
module.exports = {
  ...
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js',],
  },
  ...
};

二、webpack构建命令

  1. package.json中配置

    1
    2
    3
    scripts: {
      "build": "webpack --config webpack.config.js",
    },

  2. npm内置的npx命令直接执行

    1
    npx webpack --config webpack.config.js

三、配置node环境变量

配置webpack过程中需要使用process.env.NODE_ENV, 而默认是不存在的

cross-env包

1
npm install --save-dev cross-env

package.json

1
2
3
scripts: {
  "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
},

四、webpack-dev-server无法热替换

[HMR] Hot Module Replacement is disabled

未在webpack.config中添加 hot-module-replacement-plugin.

1
2
3
4
5
{
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
},