Weex 使用weex-loader
weex-loader 是一个 webpack 的 loader，它能把*.vue文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 vue-loader 一样的。
需要注意的是，如果 Webpack 的 entry 配置项是一个 *.vue 文件的话，你仍需要传递一个额外的 entry 参数作为标记。
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']
}]
}
}
如果你现在用的是.js文件做入口文件，你不需要写那些额外的参数。 推荐 webpack 配置的入口文件使用 javascript 文件。
{
entry: './path/to/entry.js'
}
无论什么情况下都使用 javascript 文件作为入口文件。
使用weex-loader单文件编译示例
- 执行
npm init - 修改
package.json文件，向其中添加：
"dependencies": {
"babel-loader": "^8.0.6",
"weex-loader": "^0.7.12",
"webpack": "^2.2.1"
},
"scripts": {
"build": "webpack --config webpack.config.js"
},
- 创建
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'
})
]
}
- 执行
npm run build。 - 完成。
使用weex compile编译
- 安装weex-cli：
npm install weex-toolkit -g - 执行
weex compile [资源文件] [产物地址]命令 - 完成。