webpack2教程

本文基于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的淘宝源

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

全局安装

npm i webpack@2 -g

验证安装

webpack -v
2.3.2

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

项目初始化

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

vue目录结构初始化

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全家桶

npm i vue vue-router vuex -S

文件源码之 index.html

<!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

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

<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

.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文件

先看一个简单的例子

// 入口文件main.js
module.exports = {
  entry: {
    main: './src/main.js'
  }
}

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

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

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

输出(Output)

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

还是来个例子吧

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

基于上面的配置

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

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

例如：

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

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

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

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，相见官方文档

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

一抹优化

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

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

npm i babel-plugin-transform-runtime -S

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

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

配置加载器

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 跳过 node_modules 目录
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 缓存结果
          cacheDirectory: true
        }
      }
    ]
  }
}

文件加载器

安装文件加载器url-loader

点击这里查看说明文档

npm i file-loader url-loader -S

配置加载器

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代码

配置选项，点击查看

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

提取css文件到单独的文件

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