使用vue-cli 脚手架快速搭建单页面组件 -------webpack工具的介绍

在使用vue-cli时咱们先了解一下什么是webpack。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

我使用的是webpack2.x版本，官网连接：https://webpack.js.org/

什么是webpack

webpack是现代JavaScript应用程序的模块捆绑器。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

知道了webpack这个打包工具，那么不得不提webpack的loader。

什么是loader?

webpack 的目标是，让 webpack 聚焦于项目中的全部资源(asset)，而浏览器不须要关注考虑这些。webpack 把每一个文件(.css, .html, .scss, .jpg, etc.) 都做为模块处理。然而 webpack 只理解 JavaScript。可是 loader 转换器能够将各类类型的资源转换成 JavaScript 模块。这样，任何资源均可以成为 Webpack 能够处理的模块。

Loader 能够理解为是模块和资源的转换器，它自己是一个函数，接受源文件做为参数，返回转换的结果。这样，咱们就能够经过 require 来加载任何类型的模块或文件，好比 CoffeeScript、 JSX、 LESS 或图片。

先来看看 loader 有哪些特性？

• Loader 能够经过管道方式链式调用，每一个 loader 能够把资源转换成任意格式并传递给下一个 loader ，可是最后一个 loader 必须返回 JavaScript。
• Loader 能够同步或异步执行。
• Loader 运行在 node.js 环境中，因此能够作任何可能的事情。
• Loader 能够接受参数，以此来传递配置项给 loader。
• Loader 能够经过文件扩展名（或正则表达式）绑定给不一样类型的文件。
• Loader 能够经过 npm 发布和安装。
• 除了经过 package.json 的 main 指定，一般的模块也能够导出一个 loader 来使用。
• Loader 能够访问配置。
• 插件可让 loader 拥有更多特性。
• Loader 能够分发出附加的任意文件。

配置（Configuration）

由于 webpack 配置是标准的 Node.js CommonJS 模块，你能够以下：

• 经过 require(...) 导入其余文件
• 经过 require(...) 使用 npm 的工具函数
• 使用 JavaScript 控制流表达式，例如 ?: 操做符
• 对经常使用值使用常量或变量
• 编写并执行函数来生成部分配置

最简单的配置

在webpack.config.js页面配置以下代码：

var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

多个target配置

var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');

var baseConfig = {
  target: 'async-node',
  entry: {
    entry: './entry.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'inline',
      filename: 'inline.js',
      minChunks: Infinity
    }),
    new webpack.optimize.AggressiveSplittingPlugin({
        minSize: 5000,
        maxSize: 10000
    }),
  ]
};

let targets = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main'].map((target) => {
  let base = webpackMerge(baseConfig, {
    target: target,
    output: {
      path: path.resolve(__dirname, 'dist/' + target),
      filename: '[name].' + target + '.js'
    }
  });
  return base;
});

module.exports = targets;

具体用法和配置，你们能够参考webpack的官网：https://webpack.js.org/concepts/configuration/