angular webpack配置文件及注释
时间: 2023-07-22 12:28:04 浏览: 189
webpack配置文件
Angular 使用 webpack 来构建和打包项目,webpack 配置文件默认情况下是隐藏的,使用 Angular CLI 提供的 `ng eject` 命令可以将默认的 webpack 配置文件转换为标准的 webpack 配置文件,并将所有依赖项添加到 `package.json` 文件中。下面是一个示例的 Angular webpack 配置文件及注释:
```javascript
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口文件
entry: {
'polyfills': './src/polyfills.ts',
'app': './src/main.ts'
},
// 输出文件
output: {
path: path.resolve(__dirname, 'dist'),
// 输出文件的名称
filename: '[name].[hash].js',
// chunk 文件的名称
chunkFilename: '[id].[hash].chunk.js',
// 配置资源文件的路径
publicPath: '/'
},
// 模块加载器
module: {
rules: [
// 处理 TypeScript 文件
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
} , 'angular2-template-loader'
]
},
// 处理 HTML 文件
{
test: /\.html$/,
loader: 'html-loader'
},
// 处理样式文件
{
test: /\.css$/,
exclude: path.resolve(__dirname, 'src', 'app'),
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
},
// 处理项目中的组件样式文件
{
test: /\.css$/,
include: path.resolve(__dirname, 'src', 'app'),
loader: 'raw-loader'
}
]
},
// 插件
plugins: [
// 生成 HTML 文件
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// 配置全局变量
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
// 提取公共模块
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'polyfills']
}),
// 提取样式文件
new ExtractTextPlugin('[name].[hash].css')
],
// 解析模块请求的选项
resolve: {
extensions: ['.ts', '.js']
},
// 配置 devServer
devServer: {
historyApiFallback: true,
stats: 'minimal'
},
// 配置 source map
devtool: 'source-map'
};
```
以上是一个基本的 Angular webpack 配置文件的示例,其中包括了入口文件、输出文件、模块加载器、插件、解析模块请求的选项、devServer 配置以及 source map 配置等等。注释中详细说明了每个配置项的作用和配置方式。
阅读全文