webpack2教程

Posted on | Edited on | In

本文基于webpack2.x介绍基于webpack的vue开发环境搭建
请恕本文无耻的省略了vue的知识点讲解

webpack是什么

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

点击这里 前往官网

点击这里 前往官方中文站

下面一个是最近发现的webpack2中文文档，非常详细，感谢作者！

http://www.css88.com/doc/webpack2/ 前往webpack2详细介绍(非常感谢作者的翻译)

安装webpack

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

为了丝滑的安装npm包，请安装npm的淘宝源

1
npm config set registry https://registry.npm.taobao.org

全局安装

1
npm i webpack -g

验证安装

1
2
webpack -v
2.3.2

当然，我们都应该将webpack安装到当前项目的依赖中，此时就可以使用项目的本地版本webpack，保证项目迁移时使用的是你期望的版本

项目初始化

1
2
3
4
5
6
7
8
# 新建一个目录webpack2
mkdir webpack2
cd webpack2
# 初始化一个package.json文件
npm init
# 一路回车即可
# 安装webpack依赖到当前项目中
npm i webpack -S

vue目录结构初始化

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

npm安装vue全家桶

1
npm i vue vue-router vuex -S

文件源码之 index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue build by webpack2.</title>
    <link rel="stylesheet" href="./dist/static/css/app.css" media="all">
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
  </body>
</html>

文件源码之 src/main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'

// 引用自定义的css
// import 'src/css/app.css'
import './css/app.css'

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
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    <h1 class="title">{{ msg }}</h1>
    <h2 class="tips">{{ tips }}</h2>
    <hr>
    <div class="fengjing"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg : 'Hello Vue!',
      tips: '测试pm2的监控任务！'
    }
  }
}
</script>

<style>
  .tips {
    color: red;
  }
</style>

文件源码之 src/css/app.css

1
2
3
4
5
6
7
8
9
10
11
12
.title {
  color: red;
}
h1, h2 {
  font-weight: 800;
}
/* 这里有张图片，自行随意下载之后放在"src/images"目录下 */
.fengjing {
  height: 140px;
  background: url(../images/fengjing.jpeg) center 0 no-repeat transparent;
  width: 300px;
}

webpack的配置

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

入口(Entry)

入口告诉webpack从哪里读取依赖关系并打包，在vue的应用中一般是位于项目目录下的src目录下的main.js文件

先看一个简单的例子

1
2
3
4
5
6
// 入口文件main.js
module.exports = {
  entry: {
    main: './src/main.js'
  }
}

以上是单入口的定义方法，下面介绍下多入口，其实就是并排接着加

1
2
3
4
5
6
7
// 多入口，app(应用主入口),vendors(公共库)
module.exports = {
  entry: {
     app: './src/main.js',
     vendors: './src/vendors.js'
  }
}

OK，介绍完了入口，接下来介绍输出(出口)

输出(Output)

有了上面的入口之后，我们就该告诉webpack在哪里存放打包后的文件

还是来个例子吧

1
2
3
4
5
6
7
8
9
10
module.exports = {
  output: {
    // 打包输出的目录，这里是绝对路径，必选设置项
    path: path.resolve(__dirname, './dist'),
    // 资源基础路径
    publicPath: '/dist/',
    // 打包输出的文件名
    filename: 'build.js'
  }
}

基于上面的配置

  • output.path指定了打包输出的目录，这是个必须设置的绝对路径
  • output.filename指定了打包生成的文件名
  • output.publicPath则是用于指定资源基础路径，当你的应用中的css包含图片的时候，这将非常有用

output.filename也可以设置为[name].js，动态对应入口的定义

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  entry: {
     app: './src/main.js'
  },
  output: {
    // 打包输出的目录，这里是绝对路径，必选设置项
    path: path.resolve(__dirname, './dist'),
    // 资源基础路径
    publicPath: '/dist/',
    // 打包输出的文件名
    filename: '[name].js'
  }
}

以上配置将会在dist目录下生成app.js

加载器(Loaders)

loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。

这里我们希望webpack可以加载vue文件和css文件

首先，需要先在项目中安装对应的loader

1
2
npm i vue-loader css-loader vue-template-compiler -S
npm i style-loader -S

接着配置webpack，对每一个vue文件使用vue-loader，对每一个css文件使用css-loader和style-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  module: {
    rules: [
      {
        // 这是个正则表达式
        test: /\.vue$/,
        // 指定loader
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        // 指定多个loader
        use: [
          'css-loader',
          'style-loader'
        ]
      }
    ]
  }
}

下面再介绍下加载js的加载器babel-loader

首先是安装loader并支持ES6的语法

这里有一点需要注意是，我们需要安装7.x的babel-loader，相见官方文档

1
npm i babel-core babel-loader@7.0.0-beta.1 babel-preset-es2015 -S

一抹优化

babel生成的代码，可能会用到一些_extend()， classCallCheck() 之类的工具函数，默认情况下，这些工具函数的代码会包含在编译后的文件中。如果存在多个文件，那每个文件都有可能含有一份重复的代码。

babel-runtime插件能够将这些工具函数的代码转换成require语句，避免重复

1
npm i babel-plugin-transform-runtime -S

为了支持ES6，还需要在项目根目录新建一个.babelrc文件

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

配置加载器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 跳过 node_modules 目录
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 缓存结果
          cacheDirectory: true
        }
      }
    ]
  }
}

文件加载器

安装文件加载器url-loader

点击这里查看说明文档

1
npm i file-loader url-loader -S

配置加载器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = {
  module: {
    rules: [
      {
        // 处理图片文件
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/images/[name].[ext]'
        }
      },
      {
        // 处理字体文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/fonts/[name].[ext]'
        }
      }
    ]
  }
}

插件(Plugins)

插件目的在于解决 loader 无法实现的其他事

举个最常用的例子：

  • 丑化生成的js代码

配置选项，点击查看

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}
  • 提取css文件到单独的文件

安装提取插件extract-text-webpack-plugin

点击这里查看说明文档

1
npm i extract-text-webpack-plugin -S

配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    // 打包输出的目录，这里是绝对路径，必选设置项
    path: path.resolve(__dirname, './dist'),
    // 资源基础路径
    publicPath: '/dist/',
    // 打包输出的文件名
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        /*
        use: [
          'css-loader',
          'style-loader'
        ]
        */
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
  ]
}

将会生成/dist/static/css/app.css，此时output.publicPath将会发挥作用

  • 提取入口的公共模块到单独的文件

配置选项，点击查看

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js',
      minChunks: 3
    })
  ]
}

这里我们是单入口，这个配置可以不加

完整的wepack配置文件

webpack.config.js

  • 2017.4.8 新增less支持，先安装less和less的加载器
1
2
// 安装完成之后在配置文件中添加对应的加载器规则
npm i less less-loader -S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
var path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: {
    main: './src/main.js'
  },
  resolve: {
    // 自动解析确定的扩展
    extensions: ['.js', '.vue'],
    // 告诉 webpack 解析模块时应该搜索的目录
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    alias: {
      'src': path.resolve(__dirname, './src')
    }
  },
  output: {
    // 打包输出的目录，这里是绝对路径，必选设置项
    path: path.resolve(__dirname, './dist'),
    // 资源基础路径
    publicPath: '/dist/',
    // 打包输出的文件名
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.css$/,
        /*
        use: [
          'css-loader',
          'style-loader'
        ]
        */
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize'
        })
      },
      // 支持less，2017.4.8添加
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: "css-loader?minimize" },
            { loader: "less-loader" }
          ]
        })
      },
      {
        // 处理图片文件
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/images/[name].[ext]'
        }
      },
      {
        // 处理字体文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
  ]
}