webpack踩过的那些坑

项目示例：

1、切换到项目目录：

直接进入d盘 ：  d:

cd D:\Program Files\nodejs\node_global\node_modules\webpack\jqueryDemo

2、手动打包,将入口main.js文件为dest中的bundle.js ： webpack js/main.js -o dest/bundle.js

3、通过配置文件进行打包

cnpm start

cnpm run dev

然后先后出现以下错误，小编各种查询终于解决。

升级webpack4.0后，打包报如下错误：

The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior

原因是没有指定mode 导致的 ，

解决方法：

1.package.json中设置：

”scripts": {

    "dev": "webpack --mode development",  // 开发环境

    "build": "webpack --mode production",  // 生产环境

  }

2、'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

处理方法：

将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行。

3、ERROR in Entry module not found: Error: Can't resolve ' es\nodejs\node_global\node_modules\webpack\j

错误原因：当前的webpack版本是最新的，原先的这个命令（webpack app/main.js public/bundle.js ）用不了，需更新。

解决办法：

命令更新为：webpack app/main.js -o public/bundle.js

4、webpack在局部安装，假设package.json 里面的name为：webpack，那很好又报错了

将package.json 的name属性修改为：webpackTest, 通过！

结论：package.json的name属性不能跟webpack命令一样

5、输入命令webpack，提示webpack command is not found

基于这情况，在package.json下，配置一下命令：

"scripts": {

   "test": "echo \"Error: no test specified\" && exit 1",

   "start": "webpack"

},

6，输入命令webpack，提示

ERROR in Entry module not found: Error: Can't resolve 'main' in 'F:\mypack'

检查路径，最后修改为

const pathlib = require('path');

module.exports={

entry: './js/main',

output: {

path: pathlib.resolve('dest'),

filename: 'bundle.js'

}

};

此前路径为js/main,更改为./js/main

7、ERROR in Entry module not found: Error: Can't resolve 'main' in 'F:\XXX'

解决办法：entry入口可能错了，自行修改。

8、CSS错误

解决办法：

默认情况下，webpack处理不了 CSS 的东西。

我们来处理这个问题。输入命令如下所示：npm i -S-D css-loader style-loader

9、如果在安装CSS包的时候遇到问题

解决方法：可能是配置文件中的正则验证格式有问题，我之前的错误写了scss，现在已经修正了

10、在打包的过程中webpack-cli抛出错误，查询package.json文件中的信息

安装webpack-dev-serve步骤：

npminstall-g webpack-dev-server

npminstall--save-dev webpack-dev-server

打包

npm run dev

解决方案：重新安装一个低版本的cnpm install [email protected] --save-dev

//卸载版本

cnpm uninstall webpack -g

cnpm uninstall -g webpack-dev-server

//安装指定版本

cnpm install [email protected] --save-dev

cnpm install [email protected] --save-dev