Angular2 No Bullshit Boilerplate 使用教程

Angular2 No Bullshit Boilerplate 使用教程

angular2-nobullshit-boilerplateJust what's necessary to build Angular2 apps with TS and Webpack nothing else!项目地址:https://gitcode.com/gh_mirrors/an/angular2-nobullshit-boilerplate

目录结构及介绍

angular2-nobullshit-boilerplate/
├── lib/
├── www/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
├── webpack.config.js
└── webpack.config.prod.js

• lib/: 存放项目的主要代码文件。
• www/: 存放构建后的输出文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 编译配置文件。
• webpack.config.js: Webpack 开发环境配置文件。
• webpack.config.prod.js: Webpack 生产环境配置文件。

项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置：

{
  "scripts": {
    "devserver": "webpack-dev-server --config webpack.config.js",
    "dumpdev": "webpack --config webpack.config.js",
    "dumpprod": "webpack --config webpack.config.prod.js"
  }
}

• devserver: 启动开发服务器，访问地址为 http://localhost:8080/。
• dumpdev: 构建开发环境的应用。
• dumpprod: 构建生产环境的应用（压缩版）。

项目的配置文件介绍

webpack.config.js

这是 Webpack 的开发环境配置文件，主要配置如下：

module.exports = {
  // 入口文件
  entry: './lib/index.ts',
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'www'),
    filename: 'bundle.js'
  },
  // 模块解析
  resolve: {
    extensions: ['.ts', '.js']
  },
  // 模块加载器
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  // 开发服务器配置
  devServer: {
    contentBase: path.join(__dirname, 'www'),
    compress: true,
    port: 8080
  }
};

webpack.config.prod.js

这是 Webpack 的生产环境配置文件，主要配置如下：

module.exports = {
  // 入口文件
  entry: './lib/index.ts',
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'www'),
    filename: 'bundle.min.js'
  },
  // 模块解析
  resolve: {
    extensions: ['.ts', '.js']
  },
  // 模块加载器
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  // 插件
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

以上配置文件定义了项目的入口、输出、模块解析和加载器等关键配置，确保项目在开发和生产环境都能正常运行。

angular2-nobullshit-boilerplateJust what's necessary to build Angular2 apps with TS and Webpack nothing else!项目地址:https://gitcode.com/gh_mirrors/an/angular2-nobullshit-boilerplate