從零開始學VUE之Webpack(JS打包壓縮插件的使用)

JS打包壓縮插件

• 在項目發布之前,我們必然需要對js等文件進行壓縮處理

• 這里我們就對打包的JS進行壓縮
• 我們使用 一個第三方插件uglifyjs-webpack-plugin,並且版本號指定1.1.1.,和cli2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

執行命名安裝插件

D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleplugin>npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

> uglifyjs-webpack-plugin@0.4.6 postinstall D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleplugin\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN simpleconfig@1.0.0 No description
npm WARN simpleconfig@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ uglifyjs-webpack-plugin@1.1.1
added 42 packages from 59 contributors, updated 1 package, moved 2 packages and audited 624 packages in 17.999s

39 packages are looking for funding
  run `npm fund` for details

found 11 vulnerabilities (2 low, 9 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleplugin>

安裝成功,修改webpack.config.js

// 需要從node依賴中引入 需要添加依賴環境
const path = require('path');
// 導入webpack內置插件
const webpack = require('webpack')
// 導入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 導入JS壓縮插件
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    // 配置源碼打包位置
    entry: './src/main.js',
    // 配置目標位置
    output: {
        // path 只能寫絕對路徑 不能寫相對路徑 但是不要直接寫死,需要動態獲取文件位置
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            // 增加.vue文件的loader
            {
                test: /\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    // 使用runtime-compiler
    resolve:{
        alias:{
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    // 插件
    plugins:[
        // 版權插件
        new webpack.BannerPlugin('最終版權歸彼岸舞所有!'),
        // index.html打包插件
        new HtmlWebpackPlugin({
            // 指定模板生成 不然沒有id="app"的div 同時刪除調用index.html中的 <script>應為會自動添加,所以不需要寫
            template: 'index.html'
        }),
        // JS壓縮插件
        new uglifyjsWebpackPlugin()
    ]
}

執行打包

可以看到JS已經被壓縮了,但是存在一個問題,那就是版權聲明沒有了,還有注釋都沒有了,應為這就是壓縮的一部分,這個和版權插件是沖突的

作者：彼岸舞

時間：2021\06\07

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發