我正在使用由Tynarus建造的种子项目,可以在以下链接中找到:
https://github.com/Tynarus/angular-seed
我已经完成了关于stackoverflow的先前帖子中关于webpack.common.js文件(webpack.config)中的devtool属性所做的一切,但似乎没有为我的项目生成.map文件。
我试过的事情:
1.使用 -d 与 webpack
2.使用值 cheap-module-eval-source-map,module-eval-source-map,cheap-source-map,inline-source-map
我甚至用过
new webpack.SourceMapDevToolPlugin({
filename: "[file].map"
}),
插件数组中的。
4.尝试在网上找到的其他建议,但似乎没有任何效果。
这些配置的当前状态如下
项目结构如下:
file structure
tsconfig.js
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
},
"include": [
"../**/*"
]
}
webpack.common.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const helpers = require('../helpers');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts',
'styles': './src/global.css'
},
resolve: {
extensions: [
'.js', '.ts'
]
},
module: {
rules: [
{
test: /\.ts$/,
use: [ 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ]
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.css$/,
exclude: [ /node_modules/, helpers.root('src', 'global.css') ],
use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},
{
test: /global\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader'
})
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
}
],
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: [ 'app', 'vendor', 'polyfills' ]
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('src'),
{}
)
]
};
webpack.dev.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const helpers = require('../helpers');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:3000/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
stats: 'minimal'/*,
TODO setup when REST service ready
proxy: {
'/api/**': {
target: 'http://localhost:8080/your-rest-service',
secure: false,
changeOrigin: true
}
}*/
},
plugins: [
new ExtractTextPlugin('styles.css')
]
});
webpack.prod.js
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const helpers = require('../helpers');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('styles.css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
options: {
htmlLoader: {
minimize: false // workaround for ng2
}
}
})
]
});
package.json中的脚本
"scripts": {
"start": "webpack-dev-server -d --inline --config config/build/webpack.dev.js --progress --port 3000 --content-base build",
"test": "karma start config/test/karma.conf.js",
"coverage": "npm run lint && karma start config/test/karma.conf.js --coverage=true",
"lint": "tslint -c config/tslint.json \"src/app/**/*.ts\"",
"pretest": "npm run lint",
"build": "rimraf dist && webpack -d --config config/build/webpack.prod.js --progress --profile --bail",
"server": "node config/server/prod-server.js"
},
使用所有需要的bundle创建dist文件夹,种子应用程序按预期运行,包括2个自己的模块,每个模块都有其路由器。
唯一的问题是没有创建source.map文件
使用的版本:
打字稿: ~2.5.2
webpack: ~3.4.1
webpack-dev-server: ~2.5.1