目录
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
RT:
警告是因为使用webpack没有指定mode为 development(开发模式)或者为production(生产模式)
解决方案:
所以在打包命令后添加 --mode development
即:webpack .\src\main.js .\dist\bundle.js --mode development
这时候已经咋dist文件内打包出来了一个main.js文件 但是没有按照我们想要指定的文件名称输出,并且有报错解决方案如下
错误提示说文件的出入口有问题
解决方案:
修改命令为: webpack .\src\main.js --output-filename .\bundle.js --output-path . --mode development
--output-filename:设置要打包的文件目录
--output-path:打包文件放置的文件目录
成功生成 bundle.js
这是根据网上直接贴的webpack.config.js文件配置:
解决办法:
成功运行
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 直接在根路径进行引用 实现自动转换编译和刷新浏览器 (并没有存放到实际的物理磁盘上,直接托管到电脑的内存中)
页面引用的时候
webpack-dev-server一些常用的命令:
--open 启动服务器时直接打开浏览器
--port **** 更改端口号
--contentBase xxx 指定根目录
--hot webpack-dev-server默认是每次保存都新生成一个bundle.js,通过hot指令能够对bundle.js起到一个打补丁的效果,局部的更新它 并且可以实现不刷新重载页面
导入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安装
)
RT:
解决方案:
在webpack.config.js中加入 var VueLoaderPlugin = require('vue-loader/lib/plugin')
然后就可以成功运行了
错误原因是我们引入的mui.js 与webpack打包好的bundle.js中默认启用的严格模式冲突了
解决方案: 把webpack的严格模式禁用掉
安装babel包 进入 .babelrc 文件 添加如下代码