Angular2 No Bullshit 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()
]
};
以上配置文件定义了项目的入口、输出、模块解析和加载器等关键配置,确保项目在开发和生产环境都能正常运行。