webpack踩坑合集

原创已于 2022-06-10 10:16:10 修改 · 929 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2020-05-06 22:51:06 首次发布

我可能就是个坑王。。
感觉学习webpack时一步一掉坑。
下面来细数下我在webpack上踩的那些坑

1、
在这里插入图片描述
如果确定命令是正确的，那么很可能没有安装webpack（当时就是只全局安装了webpack-cli没有安webpack）
解决：webpack，webpack-cli都在安装一遍
全局安装npm i webpack –g
指定版本3.0.0：npm i webpack@3.0.0 -g
安装到项目依赖中npm i webpack --save-dev
全局安装 npm install webpack-cli –g
安装到项目依赖中 npm install webpack-cli --save-dev

2、运行webpack .main.js .\dist\bundle.js（图是在网上找的图）
在这里插入图片描述
解决：版本不兼容webpack版本过高。两种方法：
1）更换打包命令为: webpack ./src/main.js -o ./dist/bundle.js
2）降低webpack版本使用3基本都可以 npm i webpack@3.0.0 -g

3、运行npm i webpack-dev-server –D后（安装webpack-dev-server后）执行命令报错
在这里插入图片描述
在项目中本地安装的webpack-dev-server，无法把他当做脚本命令在powershell终端中直接运行（只有安装到全局-g的工具，可在终端中正常执行）
解决：在package.json文件中scripts中添加dev指定为该工具

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },

4、运行npm run dev
在这里插入图片描述
解决：项目中本地安装webpack-cli（不知道为啥安装全局的不能用，怀疑是优先用项目中的没有项目中在用全局的。Webpack和webpack-cli这俩要用项目中都用项目中的。因为我安了本地webpack全局webpack-cli）
npm install webpack-cli --save-dev

5、运行npm run dev
在这里插入图片描述
解决：webpack和webpack-dev-server版本不兼容（我的webpack版本3，webpack-dev-server版本用2.9.4可以）
npm install webpack-dev-server@2.9.4 --save-dev

6、给package.json文件做如下配置
在这里插入图片描述
样式不显示IE显示这个错：

Chrom显示这个错：

解决：引入bundle.js路径错了
在配置之前引入的是这个路径下的bundle.js文件

<script src="../dist/bundle.js"></script>

配置后文件应该改为

  <script src="/bundle.js"></script>

（但是实际引入的路径还是第一个路径）
原因：webpack-dev-server帮我们打包生成的bundle.js文件，没有放到实际的物理磁盘上。而是直接托管到电脑内存中，所以我们项目根目录中，找不到打包好的bundle.js
可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到项目的根目录中，虽然看不到，但是可以认为有一个看不见的bundle.js和dist src nodemodules平级

7、第二种配置热更新的方法（改webpack.config.js）视频教的是启用热更新有三步必须写完才正确显示样式。我用的3.0.0版本只用写第一步即可（只写第一步出的错（盗的图））
在这里插入图片描述
解决：还是版本问题。视频用的是3.1几的版本必须配置三步。但是不知道为啥3.0.0只写第一步也能出来
3.0.0和4的只用写第一步即可
贴一下配置
module.exports外

const webpack = require('webpack') //启用热更新第2步

module.exports内

devServer: {
    open: true, //自动打开浏览器
    port: 3000, //设置启动时的运行端口
    contentBase: 'src', //指定托管的根目录
    hot: true //启用热更新第一步
},
plugins: [ //配置插件的节点
    new webpack.HotModuleReplacementPlugin() //一个热更新的模块对象，启用热更新第3步
]

8、遇见这种头tm的都炸了，无从下手。然而。。。（这个bug原因应该有很多吧。这次应该只是其中一个。下次直接先排除这个！！！）
在这里插入图片描述
解决：看看开服务器没。这次是没有开服务器
在终端运行npm run dev

9、
在这里插入图片描述
解决：没安装cnpm。打开cmd，用npm安装cnpm并将镜像源指定为淘宝镜像
运行npm install -g cnpm --registry=https://registry.npm.taobao.org

10、终端上报这个错
在这里插入图片描述
仔细看了下bug好像写的很清楚了。。找不到这个路径下的文件。再仔细看路径下面的src写成了sec。。。
解决：路径写错src写成了sec。粗心，该

11、main.js引入非js类型的文件
如main.js运行下面这句话

import './css/index.css'

在这里插入图片描述
解决：安装合适的loader
webpack默认只能打包处理js类型的文件，无法处理其他的非js类型的文件
如果要处理非js类型的文件，需要手动安装一些合适的第三方loader第三方加载器

12、配置module节点后，启动服务器
在这里插入图片描述
解决：检查loader配置。这次是粗心配置写错了
贴正确的：

module: { //配置所有第三方模块加载器
    rules: [ //所有第三方模块的匹配规则
        //配置处理css文件的第三方loader规则
        // test：要处理的文件类型，use要指定什么loader处理
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
}

13、如果遇到这种的
在这里插入图片描述
解决：检查json文件。第7行注释给删了
json文件不能写注释