webpack教程

Posted on | Edited on | In

本文将介绍从零开始搭建vue的打包环境，重点介绍webpack，vue的知识点请恕本文无耻的省略了
OK，开始！

什么是webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

点击这里 前往官网

点击这里 前往官方中文站

本文基于webpack 1.14.x的版本

安装

由于webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。

全局安装：

1
npm install webpack@1.14 -g

安装成功之后，在命令行输入webpack -h即可查看当前安装的版本信息，以及可以使用的指令

1
2
[root@localhost ~]# webpack -v
1.14.0

当然，我们都应该将webpack安装到当前项目的依赖中，此时就可以使用项目的本地版本webpack

1
2
3
4
5
6
7
8
9
10
# 确保已经进入项目目录
# 初始化一个package.json文件
npm init
# 一路回车即可
# 安装webpack依赖，这里我们安装1.14.x的版本
npm install webpack@1.14 --save-dev
# 简写
npm install webpack@1.14 -S
# –save：模块名将被添加到dependencies，可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。

安装好之后我们的package.json应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^1.14.0"
  }
}

初始化vue的项目目录结构

1
2
3
4
5
6
7
8
9
10
webpack   项目目录
  |--dist   编译打包生成的文件存放的目录
  |--node_modules   npm包存放的目录，自动生成
  |--src   vue应用的源码存放目录
  |--|---pages   vue其它组件的存放目录
  |--|---main.js   vue应用的入口js
  |--|---App.vue   vue应用的根组件
  |--index.html vue应用的骨架html
  |--package.json   npm配置文件
  |--webpack.config.js   webpack配置文件

源码

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webpack vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
  </body>
</html>

src/main.js

1
2
3
4
5
6
7
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg : 'Hello World!'
    }
  }
}
</script>

利用npm安装vue

1
npm install vue vue-router vuex -S

安装好之后我们的package.json应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.2.1",
    "vue-router": "^2.3.0",
    "vuex": "^2.2.1",
    "webpack": "^1.14.0"
  }
}

webpack的配置

命令行输入webpack直接回车，webpack会自动搜索当前目录下的webpack.config.js文件，按照配置文件运行

下面是一个简单的webpack配置文件，只处理js

1
2
3
4
5
6
7
8
9
10
11
var path = require('path'),
webpack = require('webpack')

module.exports = {
  entry: './src/main',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/[name].js',
    publicPath: '/dist/'
  }
};

简单介绍下配置文件

entry

webpack入口设置

1
entry: './src/main'

这里定义入口文件，可以单个，可以多个：

1
2
3
4
entry: {
  app: './app',
  index: './index'
}

这里的入口文件路径都是相对于webpack.config.js文件的路径，文件后缀.js可以省略

output

打包编译输出设置

1
2
3
4
5
output: {
  path: path.join(__dirname, './dist'),
  filename: 'js/[name].js',
  publicPath: '/dist/'
}

output.path

打包编译生成的文件存储路径，这里是绝对路径

output.filename

打包编译生成的文件名，这里[name]会根据入口定义自动生成文件名

例如：

  • 单入口

入口定义

1
entry: './src/main'

生成文件 main.js

  • 多入口

入口定义

1
2
3
4
entry: {
  app: './app',
  index: './index'
}

生成文件 app.js和index.js

output.publicPath

其它文件生成的路径，例如：css、图片等

loader介绍

Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。

上配置：

1
2
3
4
5
6
7
8
9
10
11
12
module: {
  loaders: [
    {
      test: /\.vue$/, // 这里是正则表达式
      loader: 'vue'  // 这里是对应的loader
    },
    {
      test: /\.css/,
      loader:  'style-loader!css-loader'
    }
  ]
}

loader怎么来呢，很简单，通过npm直接安装

1
npm install vue-loader css-loader vue-template-compiler -S

安装好之后我们的package.json应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.26.2",
    "vue": "^2.2.1",
    "vue-loader": "^11.1.3",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "webpack": "^1.14.0"
  }
}

于是，我们的webpack配置文件就长这样了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require('path'),
webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.css/,
        loader: 'style!css'
      }
    ]
  }
}

注意 这里output.filename设置的是build.js，对应上面index.html模版中引入的js文件是build.js

添加ES6的支持

如果现在你的项目还没有对ES6的语法支持，那就有点没有逼格了，其实大家都知道这个也很简单，因为我们有伟大的Babel

首先安装loader

1
npm install babel-core babel-loader babel-preset-es2015 -S

babel-loader

然后修改配置文件

1
2
3
4
5
{
  test: /\.js$/,
  loader: 'babel?cacheDirectory',
  exclude: /node_modules/
}

项目根目录下新增babel配置文件.babelrc

1
2
3
4
{
  "presets": ["es2015"],
  "comments": false
}

One more thing.

babel 给每个需要的文件注入helper扩展

原文：

babel is injecting helpers into each file and bloating my code!
babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.

下面的配置通过babel-plugin-transform-runtime插件可以禁用babel向每个文件注入helper

首先是安装babel-plugin-transform-runtime，npm install babel-plugin-transform-runtime -S

babel配置文件.babelrc调整为：

1
2
3
4
5
{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

OK，打开命令行输入webpack --color --progress就可以见证webpack 的打包了

至此，vue应用就可以正常运行了