五、uglifyjs-webpack-plugin壓縮js

注意：雖然uglifyjs是插件，可是webpack版本里默認已經集成，不須要再次安裝

目錄

webpack.config.js配置文件

// node中的引入路徑模塊
const path = require('path');
// 引入webpack
const webpack = require('webpack');
// 壓縮js
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
    //入口文件的配置項
    entry: {
        entry: './src/entry.js'
    },
    //出口文件的配置項
    output: {
        //輸出的路徑，用了Node語法
        path: path.resolve(__dirname, 'dist'),
        //輸出的文件名稱
        filename: 'bundle.js'
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module: {
        rules: [{
            // 用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
            test: /\.css$/,
            //   loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，不然報錯；
            use: ['style-loader', 'css-loader']
            //   include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）
            // query：爲loaders提供額外的設置選項（可選）
        }]
    },
    //插件，用於生產模版和各項功能 壓縮 後 不能熱更新！！！
    plugins: [
        new uglify()
    ],
    //配置webpack開發服務功能
    devServer: {
        //設置基本目錄結構
        contentBase: path.resolve(__dirname, 'dist'),
        //服務器的IP地址，能夠使用IP也能夠使用localhost
        host: 'localhost',
        //服務端壓縮是否開啓
        compress: true,
        //配置服務端口號
        port: 9097
    }
}

 

package.js依賴項

{
  "name": "xz",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

打包命令

npm start 開發環境 webpack 生產環境