WEEX添加HTML5配置

WEEX添加HTML5配置

解决使用weexpack create创建出来的项目使用http://locatlhost:8080/web去访问时没有html5页面。

---

1.修改/webpack.config.js文件

-表示删除的
+表示新增的

const webConfig = {
  context: pathTo.join(__dirname, ''),
  entry: entry,
  output: {
 -  path: pathTo.join(__dirname, 'dist'),
 +  path: pathTo.join(__dirname, 'dist', 'web'),
    filename: '[name].web.js',
  },
  module: {
    // webpack 2.0 
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'babel-loader'
        }],
        exclude: /node_modules/
      },
      {
        test: /\.vue(\?[^?]+)?$/,
        use: [{
          loader: 'vue-loader'
        }]
      }
    ]
  },
  plugins: plugins
};

2.修改/web/index.html

-表示删除的
+表示新增的

<script>
  (function () {
    function getUrlParam (key) {
      var reg = new RegExp('[?|&]' + key + '=([^&]+)')
      var match = location.search.match(reg)
      return match && match[1]
    };
 -  var page = getUrlParam('page') || '/dist/index.js';
 +  var page = getUrlParam('page') || '/dist/web/index.js';
    var bundle = document.createElement('script')
    // only for web
    bundle.src = page.replace(/\.js$/, '.web.js')
    document.body.appendChild(bundle)
  })();
</script>

3.修改/start

-表示删除的
+表示新增的

    THIS_DIR=$(dirname "$0")
    pushd "$THIS_DIR"
+   npm run dev &
    npm run serve
    popd

4.修改/package.json

-表示删除的
+表示新增的

"scripts": {
      "build": "webpack",
      "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
 -    "dev": "weex-builder src dist -w",
 -    "serve": "webpack-dev-server --config webpack.dev.js -p --open"
 +    "dev": "webpack --watch & serve -p 8080",
 +    "serve": "webpack-dev-server --config webpack.dev.js -p --open",
 +    "debug": "weex-devtool"
    }

5.完美运行

在项目根目录下执行以下命令

./start
再在浏览器访问http://localhost:8080/web

6.注意

确保以下的依赖已安装

//安装webpack
$ npm install -g webpack
//安装serve
$ npm install -g serve
//安装weexpack
$ npm install -g weexpack

7.项目地址

weex-91nn
add config for H5