webpack打包遇到的问题和解决方案

 

目录

 

webpack命令打包提示 - The 'mode' option has not been set,webpack will falback to 'production' for this value....

webpack命令打包错误提示 - Module not found: Error: can't resolve '.\dist\bundle.js' in ...

webpack命令打包提示 - configuration.output.path: The provided value "./dist" is not an absolute path!

安装本地webpack-dev-server遇到的问题

webpack命令打包提示 -Error in ./src/css/index.css 1:2 Module parse failed: Unexpected token(1:2)...

 webpack打包错误提示-webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

使用Mui.js发生的冲突-Uncaught TypeError: 'caller','callee',and 'arguments' properties may not be accessed on strict mode

---

• webpack命令打包提示 - The 'mode' option has not been set,webpack will falback to 'production' for this value....

RT:

警告是因为使用webpack没有指定mode为 development（开发模式）或者为production（生产模式）

解决方案：

所以在打包命令后添加 --mode development

即：webpack  .\src\main.js  .\dist\bundle.js --mode development

这时候已经咋dist文件内打包出来了一个main.js文件 但是没有按照我们想要指定的文件名称输出,并且有报错解决方案如下

• webpack命令打包错误提示 - Module not found: Error: can't resolve '.\dist\bundle.js' in ...

 

 错误提示说文件的出入口有问题

解决方案：

修改命令为： webpack .\src\main.js --output-filename .\bundle.js --output-path . --mode development

--output-filename：设置要打包的文件目录

--output-path：打包文件放置的文件目录

成功生成 bundle.js

 

• webpack命令打包提示 - configuration.output.path: The provided value "./dist" is not an absolute path!

RT：

这是根据网上直接贴的webpack.config.js文件配置：

 

解决办法：

成功运行

 

• 安装本地webpack-dev-server遇到的问题

1.安装到本地: npm i webpack-dev-server -D

2.修改package.json文件 在script内添加配置 ："dev": "webpack-dev-server"

3.运行项目  npm run dev

报错：

解决方案：

把webpack和webpack-cli安装到本地（虽然全局安装过了  但是很迷...）

命令： npm i webpack -D

           npm i webpack-cli -D

再次运行  npm run dev

第二行表示webpack-dev-server打包生成的bundle.js 直接在根路径进行引用 实现自动转换编译和刷新浏览器 （并没有存放到实际的物理磁盘上，直接托管到电脑的内存中）

页面引用的时候 <script src="/bundle.js"></script>

webpack-dev-server一些常用的命令：

--open 启动服务器时直接打开浏览器

--port **** 更改端口号

--contentBase xxx   指定根目录

--hot  webpack-dev-server默认是每次保存都新生成一个bundle.js，通过hot指令能够对bundle.js起到一个打补丁的效果，局部的更新它  并且可以实现不刷新重载页面

• webpack命令打包提示 -Error in ./src/css/index.css 1:2 Module parse failed: Unexpected token(1:2)...

导入css样式  import './css/index.css'

webpack默认只能打包处理JS类型的文件 无法处理其他非JS类型的文件

要手动安装一些合适的第三方loader加载器

RT：

 

解决方案：

1.打包处理CSS类型的文件 需要安装 npm i style-loader css-loader -g

2. 打开 webpack.config .js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module                对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

（注：

处理less，scss文件同理 npm i less-loader sass-loader -g 

安装less-loader的时候还要安装一个less依赖包

安装sass-loader的时候需要一个 node-sass依赖包 用cnpm安装

）

•  webpack打包错误提示-webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

RT：

解决方案：

在webpack.config.js中加入   var VueLoaderPlugin = require('vue-loader/lib/plugin')

然后就可以成功运行了

• 使用Mui.js发生的冲突-Uncaught TypeError: 'caller','callee',and 'arguments' properties may not be accessed on strict mode

错误原因是我们引入的mui.js 与webpack打包好的bundle.js中默认启用的严格模式冲突了

解决方案： 把webpack的严格模式禁用掉

安装babel包  进入 .babelrc 文件 添加如下代码