从零开始学VUE之Webpack(JS打包压缩插件的使用)

彼岸舞

发布于 2021-06-07 17:40:20

1.4K0

发布于 2021-06-07 17:40:20

JS打包压缩插件

在项目发布之前,我们必然需要对js等文件进行压缩处理
- 这里我们就对打包的JS进行压缩
- 我们使用一个第三方插件uglifyjs-webpack-plugin,并且版本号指定1.1.1.,和cli2保持一致

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

执行命名安装插件

D:\zhangyugen@jd.com\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:\zhangyugen@jd.com\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:\zhangyugen@jd.com\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()
    ]
}

执行打包