打包腳本的入口
以webpack進行腳本編譯盆驹，通過--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，配置對應(yīng)的 demo 例子
entry: {
'examples/build/web/vue-bundle': path.resolve('examples/vue', 'entry.js')
}
output.path生成文件結(jié)果對應(yīng)的目錄郊丛，.表示項目ROOT目錄下面
output.filename為entry對應(yīng)的ownProperty（比如：examples/build/web/vue-bundle）
modules.loaders用來指定文件解析器
plugins: 指定webpack對應(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 插件對應(yīng)的實現(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中對編譯依賴的組件進行引入
"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ù)每一項 loader 規(guī)則中的 test 進行正則匹配
module.exports = {
module: {
loaders: [
{ test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}, {
test: /\.vue(\?[^?]+)?$/,
loaders: ['vue-loader']
}
] }
entry.name的規(guī)則和定義
-
[name]: 獲取到文件路徑（包括相對目錄和文件名） -
[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'
}
通過 debug webpack 來獲取各個目錄信息
image
