Weex 使用weex-loader

2023-12-25 17:31 更新

weex-loader 是一個(gè) webpack 的 loader，它能把*.vue文件轉(zhuǎn)化為簡(jiǎn)單的javascript 模塊用于安卓以及 iOS 平臺(tái)。所有的特性和配置都是跟 vue-loader 一樣的。

需要注意的是，如果 Webpack 的 entry 配置項(xiàng)是一個(gè) *.vue 文件的話，你仍需要傳遞一個(gè)額外的 entry 參數(shù)作為標(biāo)記。

const webpackConfig = {
  // Add the entry parameter for the .vue file
  entry: './path/to/App.vue?entry=true'

  /* ... */

  use: {
    loaders: [{
      // matches the .vue file path which contains the entry parameter
      test: /\.vue(\?^^]+)?$/,
      loaders: ['weex-loader']
    }]
  }
}

如果你現(xiàn)在用的是.js文件做入口文件，你不需要寫(xiě)那些額外的參數(shù)。 推薦 webpack 配置的入口文件使用 javascript 文件。

{
  entry: './path/to/entry.js'
}

無(wú)論什么情況下都使用 javascript 文件作為入口文件。

使用weex-loader單文件編譯示例

  1. 執(zhí)行npm init
  2. 修改package.json文件，向其中添加：
  "dependencies": {
    "babel-loader": "^8.0.6",
    "weex-loader": "^0.7.12",
    "webpack": "^2.2.1"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  1. 創(chuàng)建webpack.config.js,按照你的需要更改。
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: '<your-input-file>',
  output: {
    path: path.resolve(__dirname, './'),
    filename: <your-output-file>
  },
  module: {
	    rules: [
	      {
	        test: /\.vue(\?[^?]+)?$/,
	        loaders: ['weex-loader']
	      },
	      {
	        test: /\.js$/,
	        loaders: ['babel-loader']
	      }
	    ]
	  },
	plugins: [
		new webpack.BannerPlugin({
			raw: true ,
			banner: '// { "framework": "Vue" }\n'
		})
	]
}
  1. 執(zhí)行npm run build。
  2. 完成。

使用weex compile編譯

  1. 安裝weex-cli：npm install weex-toolkit -g
  2. 執(zhí)行weex compile [資源文件] [產(chǎn)物地址]命令
  3. 完成。
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)