JS Package compression plug in

• Before the project is released , We must be right js Wait for the file to be compressed
  • Here we are dealing with packaged JS Compress
  • We use A third-party plug-in uglifyjs-webpack-plugin, And the version number specifies 1.1.1., and cli2 bring into correspondence with

npm install [email protected] --save-dev

Perform a named installation plug-in

D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>npm install [email protected] --save-dev
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
> [email protected] postinstall D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
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:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>

Installation successful , modify webpack.config.js

// Need from node Introduction of dependency Dependency environment needs to be added
const path = require('path');
// Import webpack Built in plug-ins
const webpack = require('webpack')
// Import HtmlWebpackPlugin plug-in unit
const HtmlWebpackPlugin = require('html-webpack-plugin')
// Import JS Compression plug-ins
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// Configure source code packaging location
entry: './src/main.js',
// Configure the target location
output: {
// path Only absolute path can be written Can't write relative path But don't just write dead , Need to get the file location dynamically
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']
}
}
},
// increase .vue Of documents loader
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
// Use runtime-compiler
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
},
// plug-in unit
plugins:[
// Copyright plugin
new webpack.BannerPlugin(' The final copyright belongs to the other shore dance !'),
// index.html Packaging plug-in
new HtmlWebpackPlugin({
// Specify template generation Otherwise, No id="app" Of div Also delete the call index.html Medium <script> Expected to add... Automatically , So there's no need to write
template: 'index.html'
}),
// JS Compression plug-ins
new uglifyjsWebpackPlugin()
]
}

Perform packaging

You can see JS It's compressed , But there is a problem , The copyright notice is gone , And there are no comments , This is part of the compression , This is in conflict with the copyright plug-in

author ： Dance on the other side

Time ：2021\06\07

It's about ：VUE

This article belongs to the author's original , Without permission , No forwarding