wlk-base-template v1.0.0

we-helloworld-template

此框架支持ES6语法转ES5和热更新，方便开发，提高开发效率。

开发环境

node 版本6.5以上

开始

• 安装相关依赖包

  $ npm install

• 启动项目

  $ npm start

  将自动打开谷歌浏览器，并自动访问谷歌浏览器，访问地址： http://dev.huawei.com:3000/apps/welink.demo/1/html/index.html

• 配置项目入口文件，以首页入口为例子：

  在项目根目录的 entries.config.js 中，添加配置，如：

  module.exports = {
    'vendor': ['./src/js/lib/common.js'],
    'index': './src/js/index.js',
    'list': './src/js/page.js'
  };

  其中 vendor 是公用文件配置地址，可以配置多个文件。

  首页入口文件为./src/js/index.js，这里需要注意，在 ./src/html 文件夹里，需要对应有index.html。按照此规则，index.html文件将自动引用 ./src/js/index.js 文件， 页面无需手动引用。

• 构建项目

  uat环境包

  $ npm run build -- uat

  生产包

  $ npm run build -- prod

使用说明

项目目录结构

|—— build
│   ├── common // jsapi文件目录
│   └── apps   // 打包生成的app目录
|—— config
│   └── server.config.js // 开发环境设置，可修项目名称、端口号等
├── src // 源代码目录
│   ├── assets // 静态资源
│   ├── css // 样式文件
│   ├── html // html文件
│   └── js // js文件包含入口文件  
├── tools // 打包相关 
├── .eslintrc // eslint配置文件  
├── entries.config.js // webpack入口文件配置
├── package.json // node相关环境的配置文件
├── plugin.json // 构建配置文件
└── webpack.config.js // webpack配置文件

配置本地代理服务

使用chorme配置代理（推荐），右键 Chrome 应用图标，点击属性，在“目标”最后增加 --disable-web-security --user-data-dir 配置。

public文件夹的使用

引入外部资源

你可以通过public 文件夹引入其他模块代码。

注意，我们通常鼓励您使用JavaScript文件中的import引入。 这种机制提供了许多好处:

• 脚本和样式表被压缩并打包在一起，以避免额外的网络请求。
• 丢失的文件会导致编译错误，而不是为您的用户造成404错误。

如果你将一个文件放入 public 文件夹，它将不会被Webpack处理。相反，它将被复制到build文件夹的项目根目录下。

在 index.html 里面，你可以这也使用：

<link rel="shortcut icon" href="../favicon.ico">

当你执行 npm run build，模板将会替换正确的路径。

请记住这种方法的缺点:

• public 文件夹内的所有文件都不会被处理或压缩。
• 在编译时将不会因为丢失的文件或js语法问题，而提示错误。

什么时候适合使用public文件夹

public文件夹对于一些不太常见的情况是有用的:

• 您有数千个图像，需要动态地引用它们的路径。
• 你想要引入一段小的脚本比如pack.js而不经过webpack打包编译。
• 有些库可能与Webpack不兼容，您没有其他选择，只能将它通过<script>标签引入。