怎么在webpack中搭建一个vue项目

这篇文章给大家介绍怎么在webpack中搭建一个vue项目，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联是一家专注于网站设计制作、成都网站设计与策划设计,绥阳网站建设哪家好?成都创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:绥阳等地区。绥阳做网站价格咨询:18982081108

前期准备

1. webpack

2. vue.js

3. npm

4. nodejs

5. ES6语法

创建项目

mkdir vue-demo 
cd vue-demo

使用 npm init 命令 生成package.json文件

npm init

大概生成的package.json 如下:

{
 "name": "vue-demo",
 "version": "1.0.0",
 "description": "this is a vue demo",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "license": "ISC",
 "dependencies": {
 }
}

引入webpack ，关于如何使用webpack 请参考官网

npm install webpack --save-dev

如果使用npm下载的速度过慢，可以使用淘宝的cnpm 镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

输入以上命令即可将npm指向国内镜像，使用时需将npm 替换成cnpm即可， 其他不变

在项目中创建webpack.config.js 文件

const path = require('path')
module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 }
}

使用webpack 命令编译

webpack

编译之后的项目目录大概如下:

注意：在使用webpack命令之前 需先创建 index.html 和 main.js 文件 其中 main.js文件位于src 目录下

index.html 的内容如下

main.js 的内容如下

alert('hello world');

引入vue

npm install vue --save

执行命令后会在package.json中新增如下代码

"dependencies": { "vue": "^2.4.2" }

将main.js中的内容修改为如下代码

import Vue from 'vue'
var vm = new Vue({
 el:'#app',
 data:{
  msg:'hello vue'
 }
})

引入babel

npm install --save-dev babel-core babel-loader

由于在使用vue时会用到很多es6的语法，但是现在很多浏览器对es6的支持不是很好，所以在编译时需要将这些语法转换es5的语法，此时我们使用babel来进行编译。

babel的使用请阅读官网文档http://babeljs.cn/。

将babel加入到webpack.config.js 配置文件中：

const path = require('path')

module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 },
 module:{
  rules:[
   {
    test: /\.js$/,
    loader:"babel-loader",
    exclude: /node_modules/
   }
  ]
 }
}

然后命令行输入 webpack 命令即可进行编译，再编译完成后用浏览器打开index.html 文件，此时会发现浏览器控制台出现以下错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

这是因为正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本，需要在配置文件中添加如下代码

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
 }
 }

此时在运行webpack 命令重新编译，编译后在访问index.html页面，页面内容如下图

此时一个基于webpack的vue 项目就搭建好。

webpack的一些常用配置

在项目的实际开发中我们还会引入css、图片以及字体等资源文件。这些文件的引入都需要相应的加载器才能将其加载到项目中并正常使用。

下面只介绍部分我们需要的加载器的使用方法, 更多信息请查阅webpack加载器文档。

css加载器

我们需要引入css-loader、和style-loader (安装style-loader的目的是为了在html中以style的方式嵌入css )。

执行命令

npm install --save-dev css-loader style-loader

在 webpack.config.js 中进行如下配置

module: {
  rules: [{
   test: /\.js$/,
   loader: "babel-loader",
   exclude: /node_modules/
  }, {
   test: /\.css$/,
   loader: 'style-loader!css-loader'
  }]
 },

然后再src 目录下 新建一个styles的文件夹并在里面添加一个main.css的文件,写上以下内容

#app{
 color:red;
}

然后再运行 webpack 命令, 并重新加载index.html 文件 ,可见css已经生效,效果如下图

图片资源的加载

使用file-loader或者url-loader加载器进行加载，他们都是用于打包文件和图片资源的，两者的区别是url-loader在file-loader的基础上进行了一次封装。

在访问网站时如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符,再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。

当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

此处我们使用url-loader,由于它是基于file-loader的封装，所以也需要引入file-loader。

npm install --save-dev file-loader url-loader

webpack.config.js 的rules 中增加如下配置

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000
 }
}

接下来就是将图片引入到代码中，需要在main.js和index.html 分别作如下修改:

main.js

import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'

var vm = new Vue({
 el:'#app',
 data:{
  logo:logo,
  msg:'hello vue'
 }
})

index.html

 
 


 
  
  {{msg}}