javascript – 設定 webpack 壓縮 JS 文檔

2018-05-24 / JSN / 0 Comments / 332 次瀏覽

webpack.config.js

const webpack = require('webpack');

const path = require('path');

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

watch: true,

// development | production

mode: 'production',

entry: {

'jquery.vmodel': './src/index.js'

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name].min.js'

devtool: 'source-map',

plugins: [

new UglifyJSPlugin({

sourceMap: true

})

]

};

建議啟用 devtool: ‘source-map’，可以幫助錯誤報告不會指向 min.js 而是指向開發文件的 .js 。

透過 entry 指定，我將「./src/index.js」壓縮成「.dist/jquery.vmodel.min.js」。

進入點 index.js 可以透過 inport 引入不同的 JS 開發文件，達到將多個 JS 依序壓縮成 min.js 檔。例如我的 index.js 長這樣：

import './jquery.vmodel.init.js';

import './jquery.vmodel.api.js';

import './jquery.vmodel.version.js';

import './jquery.vmodel.end.js';

import './jquery.vmodel.history.js';

import './jquery.vmodel.get.js';

import './jquery.vmodel.delete.js';

import './jquery.vmodel.create.js';

import './jquery.vmodel.fn.js';