weex vue打包html5,【分析】weex vue web 打包脚本解析

打包脚本的入口

以webpack进行脚本编译，通过--config 指定构建脚本配置

{

...

"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 内容

entry ，配置对应的 demo 例子

entry: {

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

}

output.path 生成文件结果对应的目录，. 表示项目 ROOT目录下面

output.filename为 entry 对应的 ownProperty (比如：examples/build/web/vue-bundle)

modules.loaders 用来指定文件解析器

plugins : 指定 webpack 对应的插件

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 插件对应的实现

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 定义代码文件的解析规则

在 package.json 中对编译依赖的组件进行引入

"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

根据每一项 loader 规则中的 test 进行正则匹配

module.exports = {

module: {

loaders: [

{ test: /\.js$/,

loaders: ['babel-loader'],

exclude: /node_modules/

}, {

test: /\.vue(\?[^?]+)?$/,

loaders: ['vue-loader']

}

] }

entry.name 的规则和定义

[name] : 获取到文件路径(包括相对目录和文件名)

[chunkhash:X] : 获取文件 hash 串， x 表示需要留多少位

image

webpack 收集需要构建文件

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'

}

通过 debug webpack 来获取各个目录信息

image