webpack.common.js的devtool属性中没有可能的值将生成.map文件

时间:2017-11-16 14:07:47

标签: angular webpack webpack-dev-server webpack-2

我正在使用由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

0 个答案:

没有答案
相关问题