【Webpack】開發環境設置+SourceMap生成

devServer、devtool

【Webpack】開發環境設置+SourceMap生成

devServer、devtool


開發環境設置

  1. webpack.config.js新增:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const path = require('path');

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: './js/main.js', 
        clean: true, 
    },
    devServer: {
        static: path.resolve(__dirname,'dist'),
        compress: true, //啟用gzip壓縮方式(加速)
        hot: true, //只重新加載修改的部分
        watchFiles: ['src/**/*'] //監控檔案
    }
}


自動生成map檔

  1. webpack.config.js新增:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const path = require('path');

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: './js/main.js', 
        clean: true, 
    },
    devServer: {
        static: path.resolve(__dirname,'dist'),
        compress: true,
        hot: true,
        watchFiles: ['src/**/*']
    },
    devtool: 'source-map' //自動生成sourceMap檔
}


其他相關