使用webpack打包vue项目
使用webpack打包vue项目
安装webpack工具,安装方式有两种:全局安装(命令:
npm install -g webpack webpack-cli
)以及安装在项目中,这里使用第二种://在项目中安装,这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli
在项目根目录新建一个webpack.config.js文件,配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)**添加代码如下:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法// 入口文件entry:"./src/main.js",// 打包后的出口文件output:{// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的path:path.resolve(__dirname,'build'),// 输出的文件名称filename:'build.js',},//配置webpack开发服务功能devServer:{contentBase: "./src", //本地服务器所加载的页面所在的目录host: "localhost",inline: true, //实时刷新compress: true,port: 8080,},mode:"development"
}
在package.json文件中配置打包命令:
之后就可以使用
npm run build
命令对整个vue项目进行打包了。配置Loaders
上面给出的webpack.config.js的内容还不完整,所以会报错。这里附上官网地址,官网给出的解释如下:
意思是webpack只能打包JavaScript和JSON文件。Loaders允许webpack处理其他类型的文件,Loaders有两个属性:test
属性标识要转换的文件;use
属性指示应该使用哪个loader(加载器)进行转换。而我们的项目是vue工程,肯定包括.vue
文件和html
文件,那么如何让webpack解析.vue
文件以及html
文件呢?首先看个官网例子就大概能清楚怎么解析.vue
文件了。
4.1 解析.vue
文件
module.rules
允许我们在webpack配置中指定多个类型的loaders。首先,按照官网提示,首先下载需要的vue-loader
,在项目终端执行命令:
npm install --save-dev vue-loader
然后在webpack.config.js中使用该loader:
module.exports = {module: {rules: [{ test: /\.vue$/, use: 'vue-loader' },],},
};
还要加上:
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {//...plugins:[new VueLoaderPlugin(),]//...
}
像下图这样:
不然会报错:ERROR in ./src/App.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
原因:
官方在vue-loader15以上必须要配合插件使用
信心满满地以为这次马到成功,结果还是报错:
Module parse failed: Unexpected character ‘#’ (46:0) File was processed with these loaders:./node_modules/vue loader/lib/index.js You may need an additional loader to handle the result of these loaders.
解决办法:
vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外,还需另外单独配置css-loader。
所以在终端执行命令npm install --save-dev css-loader
,再在webpack.config.js里面加上:
module.exports = {//...module: {rules: [{ test: /\.css$/, use: 'css-loader' },],},//...
}
还有很多类型的文件解析loader,可以根据官网文档loader部分下载相应的loader,并在webpack.config.js里进行使用。一般只要报错,就是版本问题,可上网搜索解决办法。
4.2解析html
跟上面同样的步骤,下载html-loader,再在webpack.config.js使用即可,但是也需要配合plugin使用。所以需要在webpack.config.js加入以下内容:
const HtmlWebpackPlugin = require("html-webpack-plugin")
//...plugins:[//...new HtmlWebpackPlugin({template: path.resolve(__dirname, './public/index.html')})],
4.3图片资源打包(.png/.jpg/.gif)
我的项目中还有图片资源需要打包,所以还需要下载url-loader
,并在相应部分添加:
{// 处理图片资源test: /\.jpg|png|gif$/,// 只使用一个loader处理,写法如下:// 下载 url-loader 和 file-loaderloader:'url-loader',// loader的配置可以通过option来配置options: {// 图片大小小于12kb,就会base64处理// 通常我们只会对8-12kb以下的图片进行base64处理// 优点:减少请求数量(减轻服务器压力)// 缺点:图片体积会更大(文件请求速度更慢)limit: 12 * 1024}}
4.4多个js文件打包成一个文件
项目里面有多个js需要打包成一个js文件,必须使用模块化开发方式,需要通过一个集合js的文件,将其他各个的js文件模块,进行集中引入。(参考了博客1和博客2)
我就新建了一个blocklyTools.js
文件将那些分散的.js文件引用进去
再将新建的blocklyTools.js
写到入口文件处,最后连同main.js
编译成一个build.js
文件:
最终webpack.config.js
的配置内容如下:
const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { // 这里是commrnt.js语法// 入口文件entry:["./src/main.js","./src/blocklyTools.js"],// 打包后的出口文件output:{// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的path:path.resolve(__dirname,'build'),// 输出的文件名称filename:'build.js',},mode:"development",module: {rules: [{ test: /\.vue$/, use: 'vue-loader' },{ test: /\.css$/, use: ['style-loader','css-loader'] },{// 处理图片资源test: /\.jpg|png|gif$/,// 只使用一个loader处理,写法如下:// 下载 url-loader 和 file-loaderloader:'url-loader',// loader的配置可以通过option来配置options: {// 图片大小小于12kb,就会base64处理// 通常我们只会对8-12kb以下的图片进行base64处理// 优点:减少请求数量(减轻服务器压力)// 缺点:图片体积会更大(文件请求速度更慢)limit: 12 * 1024}},],},plugins:[new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, './public/index.html')})],
}
终于完结,撒花!!!!!!!!!!!!!!!!!!!!!!
使用webpack打包vue项目相关推荐
- webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来 转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主 亲测, ...
- php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
- WebPack实战 WebPack打包Vue项目
文章目录 前言 一.使用webpack来进行vue-cli模块化开发 二.Webpack配置区分开发环境和生产环境 三.vue项目打包 3.1.config-index.js文件 3.2.build- ...
- webpack打包VUE项目读取外部配置文件,灵活配置域名
参考方案一 作为一个兼职前端和运维的java程序员,今天我司测试人员提出了一个需求,当后台服务地址ip地址改变后,webpack打包的VUE项目得更改地址重新打包,太麻烦了,最好可以读取外部配置文件的 ...
- 【vue项目问题解决】如何做到webpack打包vue项目后,可以修改配置文件IP和端口
记录在项目开发过程中遇到的小问题,积累开发经验,欢迎大家一起留言探讨 问题 我们在vue项目中打包的时候,webpack会将我们的组件,html,js,css,jpg等其他文件进行打包,其中请求的ip ...
- webpack打包vue项目之后生成的dist文件该怎样启动运行跑起来
webpack打包生成了dist文件 ,直接运行dist文件中的index.html会报这个错. 我们需要部署在express-generator服务器上来运行. 安装express-generato ...
- 【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本 "publish": " webpack --config webpack.publish.config.js -p ...
- vue打包放到Java项目里_【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本"publish": " webpack --config webpack.publish.config.js -p& ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
最新文章
- ubuntu 12.04 配置vsftpd 服务,添加虚拟用户,ssl加密
- springboot-自动配置原理
- 5G NR SRS (R15)
- initWithFrame方法的理解(转)
- JSON返回的自定义
- 计算机真题11Excel,计算机网考真题EXCELPPT操作题答案(11页)-原创力文档
- 百面机器学习—3.逻辑回归与决策树要点总结
- 霍夫变换检测直线的公式推导以及基于opencv的源代码分析并实例实现
- 固态硬盘安装与系统安装流程
- linux下载ed2k资源,linux下迅雷替代方案-linux下载工具
- python查询12306余票_Python实现查询12306火车票信息
- VMware安装_CentOS 7.x系统
- 解决阿里oss远程图片html2canvas生成海报时跨域问题(附代码)
- 如何防止恶意攻击短信验证码接口
- win7计算机里没有网络图标,Win7网络图标不见了怎么办?Win7系统找回网络图标的方法...
- DevOps/SRE 成长计划
- socket error 10038查错
- ashx输出json_se7en3_新浪博客
- 杭州高级职称申报通过率如何提升?
- 僵尸网络Mirai变种疑似开始针对华为进行武器制作