webpack4搭建vue项目的案例

　　介绍

这篇文章给大家分享的是有关webpack4搭建vue项目的案例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>新建项目

1。新建名为webpackconfig文件夹

2。使用命令

npm  init  - y

在webpackconfig文件夹中生成package.josn

3。下载依赖包

npm 小姐:webpack  webpack-dev-server  webpack-cli  - d

4。新建src文件夹并在src中创建主要。js文件

警报(1)

5。新建webpack.config.js文件

webpack.config。js文件

var  path =,要求(& # 39;path & # 39;);=,{var  config  　　,,,条目:,& # 39;。/src/main.js& # 39;,, 　　输出:,,,,{,, 　　,,,,路径:,path.resolve(时间+ __dirname  & # 39;/dist # 39;),//打包生成文件地址,, 　　,,,,文件名:,& # 39;[名字].build.js& # 39;//生成文件明 　　,,,,publicPath:, & # 39;/dist/& # 39;//文件输出的公共路径 　　,} 　　} 　　时间=module.exports 配置;

条目:引入文件,对象写法可以引入多文件

,条目:,{ 　　,应用程序:& # 39;。/src/app.js& # 39; 　　供应商:大敌;& # 39;。/src/vendors.js& # 39; 　　以前,}

输出:文件输出地址

路径:输出文件地址

文件名:输出文件名

publicPath:文件输出路径

6。新建一个index . html文件并引入主要。js

& lt; ! DOCTYPE  html> & lt; html  lang=癳n"比; 　　& lt; head>, 　　,& lt; meta  charset=癠TF-8"祝辞, 　　,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0“祝辞, 　　,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"祝辞, 　　,& lt; title> Document 　　& lt;/head> 　　& lt; body>, 　　https://www.yisu.com/zixun/, & lt; script  src="/dist/main.build.js "> 　　 　　

7。配置包。json

“dev":,“webpack-dev-server ——open ——hot",, 　　“build":“webpack ——模式=development ——progress ——hide-modules"

配置之后运行

npm  run  dev

会打开一个服务并弹出1

但是webpack会有一个警告,这个警告就是因为没有配置模式,就是没有配置相应模式

模式有两个参数,一个是开发模式发展一个是生产模式生产。

可以在包中。json里直接配置

“dev":,“webpack-dev-server ——模式=development ——open ——hot"

这样就没有警告了

接下来运行

npm  run 构建

会打包生成一个新的dist文件夹

webpack4搭建vue项目的案例

8。引入装载机兼容代码

npm 小姐:babel-loader  babel-core  babel-preset-env  - d

babel-preset-env帮助我们配置巴别塔。我们只需要告诉它我们要兼容的情况(目标运行环境),它就会自动把代码转换为兼容对应环境的代码。

更改webpack.config。js文件

模块:,{ 　　,规则:[ 　　,{大敌; 　　,,,测试:& # 39;美元/\ . js/& # 39; 　　,,,包括:path.resolve(时间+ __dirname  & # 39;/src # 39;), 　　,才能排除:/node_modules/, 　　,,,使用:[ 　　,,,{ 　　,,,,装载机:,& # 39;babel-loader& # 39; 　　,,,,选择:,(& # 39;env # 39;】 　　,,,} 　　,,,) 　　,,} 　　,) 　　}

9。下载vue并在主要。js引入

import  Vue 得到& # 39;vue # 39;; 　　Vue ({new  　　,el: & # 39; #应用# 39;,, 　　,数据:{,, 　　,,味精:& # 39;你好,, 　　,} 　　})

运行项目发现报错

vue.runtime.esm.js: 620 (Vue警告):您正在使用的运行时只构建Vue模板编译器不可用。预编译模板渲染功能,或者使用编译器构建。

(中& lt; Root>)

报这个错误原因就是因为使用的是运行版本的vue,编译版本不能用,这时候在我们需要随后我们还要配置别名,将<代码>的决心。别名> 解决:,{,, 　　,别名:{,, 　　,& # 39;vue $ & # 39;:, & # 39; vue/dist/vue.esm.js& # 39;,,,, 　　,& # 39;@ # 39;:,path.resolve (__dirname, & # 39;/src,),, 　　}大敌; 　　}

然后在运行项目,发现已经在页面上打印出了你好。

一个简单的基于webpack的vue项目已经搭建好了。

webpack4搭建vue项目的案例