weex默認webpack.config.js改造的示例分析
這篇文章給大家分享的是有關weex默認webpack.config.js改造的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比文安網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式文安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋文安地區(qū)。費用合理售后完善，10年實體公司更值得信賴。
具體如下：
解決的問題：
由于weex默認的webpack配置，會導致在src文件夾下的每一個.vue在temp文件夾下生成對應的一個.js文件，該js文件有一段這樣的代碼
contents += 'var App = require(\'' + relativePath + '\')\n'; contents += 'App.el = \'#root\'\n'; contents += 'new Vue(App)\n';
會導致多個vue對象掛載同一個id（#root），導致整個頁面就只有一個vue對象，無法像寫spa項目一樣寫weex項目，因此在這里對webpack.cofig進行改造（添加一個entry.js入口js文件，和一個最外層的App.vue承載路由渲染）
默認的webpack.config.js文件中，有兩個方法
第一個 getEntryFileContent
const getEntryFileContent = (entryPath, vueFilePath) => {
let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
let contents = '';
/**
* The plugin's logic currently only supports the .we version
* which will be supported later in .vue
*/
if (hasPluginInstalled) {
const plugindir = pathTo.resolve('./web/plugin.js');
contents = 'require(\'' + plugindir + '\') \n';
}
if (isWin) {
relativePath = relativePath.replace(/\\/g, '\\\\');
}
contents += 'var App = require(\'' + relativePath + '\')\n';
contents += 'App.el = \'#root\'\n';
contents += 'new Vue(App)\n';
return contents;
}第二個 walk
const walk = (dir) => {
dir = dir || '.';
const directory = pathTo.join(__dirname, 'src', dir);
fs.readdirSync(directory).forEach((file) => {
const fullpath = pathTo.join(directory, file);
const stat = fs.statSync(fullpath);
const extname = pathTo.extname(fullpath);
if (stat.isFile() && extname === '.vue' || extname === '.we') {
if (!fileType) {
fileType = extname;
}
if (fileType && extname !== fileType) {
console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
}
const name = pathTo.join(dir, pathTo.basename(file, extname));
if (extname === '.vue') {
const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
}
weexEntry[name] = fullpath + '?entry=true';
} else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
const subdir = pathTo.join(dir, file);
walk(subdir);
}
});
}這兩個方法，是遍歷src中的.vue文件，然后在temp文件夾中生成一個相對應的JS文件
如果我們采用傳統(tǒng)的vue開發(fā)，需要一個入口.js文件，我們需要對這個配置進行改造
添加入口文件配置
const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};刪除或者更改配置（當然，第三種方法還可以把.vue組件不寫在src內(nèi)）
刪除
刪除getEntryFileContent函數(shù)
刪除walk函數(shù)
刪除walk() walk函數(shù)的調(diào)用
修改（代碼來自github上高仿網(wǎng)易嚴選項目）
注意看最外層的if判斷，添加了額外條件 如果是文件且后綴是.vue且不是App.vue的，則進入判斷。否則，判斷是不是page文件夾，如果不是，則結束。
function walk(dir) {
dir = dir || '.';
const directory = pathTo.join(__dirname, 'src', dir);
fs.readdirSync(directory)
.forEach((file) => {
const fullpath = pathTo.join(directory, file);
const stat = fs.statSync(fullpath);
const extname = pathTo.extname(fullpath);
const basename = pathTo.basename(fullpath);
console.log("配置",file,fullpath,stat,extname,basename,)
if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) {
if (!fileType) {
fileType = extname;
}
if (fileType && extname !== fileType) {
console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
}
const name = pathTo.join(dir, pathTo.basename(file, extname));
if (extname === '.vue') {
const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
}
weexEntry[name] = fullpath + '?entry=true';
} else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) {
const subdir = pathTo.join(dir, file);
walk(subdir);
}
});
}感謝各位的閱讀！關于“weex默認webpack.config.js改造的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
分享題目：weex默認webpack.config.js改造的示例分析
分享URL：http://www.jiaotiyi.com/article/pegipi.html