打包腳本的入口

以webpack進(jìn)行腳本編譯，通過(guò)--config 指定構(gòu)建腳本配置

{
  ...
  "scripts": {
    ...
    "build:examples:web": "webpack --config build/webpack.examples.web.config.js",
    "build:ci:web": "webpack --watch --config build/webpack.ci.web.config.js",
    "dev:examples:web": "webpack --watch --config build/webpack.examples.web.config.js",
    "serve": "serve ./ -p 12580",
    ... }

webpack 配置文件中 export 內(nèi)容

entry ，配置對(duì)應(yīng)的 demo 例子

  entry: {
    'examples/build/web/vue-bundle': path.resolve('examples/vue', 'entry.js')
  }

output.path 生成文件結(jié)果對(duì)應(yīng)的目錄，. 表示項(xiàng)目 ROOT目錄下面

output.filename為 entry 對(duì)應(yīng)的 ownProperty （比如：examples/build/web/vue-bundle）

modules.loaders 用來(lái)指定文件解析器

plugins : 指定 webpack 對(duì)應(yīng)的插件

module.exports = {
  entry: entry,
  output: {
    path: '.',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/
      }, {
        test: /\.vue(\?[^?]+)?$/,
        loaders: ['vue-loader']
      }
    ]
  },
  vue: {
    optimizeSSR: false,
    /**
     * important! should use postTransformNode to add $processStyle for
     * inline style prefixing.
     */
    compilerModules: [
      {
        postTransformNode: el => {
          el.staticStyle = `$processStyle(${el.staticStyle})`
          el.styleBinding = `$processStyle(${el.styleBinding})`
        }
      }
    ],
  },
  plugins: [bannerPlugin],
  watch:true
}

bannerPlugin 插件對(duì)應(yīng)的實(shí)現(xiàn)

var webpack = require('webpack');
var banner = '// NOTE: for vue2.0 and platform:web only.\n'

var bannerPlugin = new webpack.BannerPlugin(banner, {
  raw: true,
  exclude: bannerExcludeFiles
})

module.loaders 定義代碼文件的解析規(guī)則

在 package.json 中對(duì)編譯依賴的組件進(jìn)行引入

    "devDependencies": {
    ...
    "babel-loader": "^6.2.5",
    "css-loader": "^0.26.1",
    "json-loader": "^0.5.4",
    "vue-loader": "^12.2.1",
    "webpack": "^1.13.1",
    "weex-loader": "^0.5.3",
    "weex-vue-render": "^0.12.32",
    ...
  }

配置需要引用的 xxxx-loader

根據(jù)每一項(xiàng) loader 規(guī)則中的 test 進(jìn)行正則匹配

module.exports = {
  module: {
    loaders: [
      { test: /\.js$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/
      }, {
        test: /\.vue(\?[^?]+)?$/,
        loaders: ['vue-loader']
      }
    ] }

entry.name 的規(guī)則和定義

• [name] : 獲取到文件路徑（包括相對(duì)目錄和文件名）
• [chunkhash:X] : 獲取文件 hash 串， x 表示需要留多少位
  
  image

webpack 收集需要構(gòu)建文件

var entry = {};
var webSrcDirectory = path.join(__dirname, '../examples/web-entry');
function getEntryFileContent (entryPath, vueFilePath) {
  ...
}

function walk(dir) {
  dir = dir || '.';
  var directory = path.join(__dirname, '../examples', dir);
  var entryDirectory = path.join(webSrcDirectory, dir);
  fs.readdirSync(directory)
    .forEach(function(file) {
      var fullpath = path.join(directory, file);
      var stat = fs.statSync(fullpath);
      var extname = path.extname(fullpath);
      if (stat.isFile() && extname === '.vue') {
        var entryFile = path.join(entryDirectory, path.basename(file, extname) + '.js');
        fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath));
        var name = path.join('examples', 'build/vue-web', /*path.relative('vue', dir)*/dir, path.basename(file, extname));
        entry[name] = entryFile + '?entry=true';
      } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
        var subdir = path.join(dir, file);
        walk(subdir);
      }
    });
}

walk();

用于展示 web 的代碼入口文件生成

function getEntryFileContent (entryPath, vueFilePath) {
  const relativePath = path.relative(path.join(entryPath, '../'), vueFilePath);
  return 'var App = require(\'' + relativePath + '\')\n'
    + 'App.el = \'#root\'\n'
    + 'new Vue(App)\n'
}

通過(guò) debug webpack 來(lái)獲取各個(gè)目錄信息

image