webpack构建vue项目 基础03 之js

webpack构建vue项目 基础03 之ES6以及ES6以上语法转化

package.json

  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "babel-loader": "^8.0.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "@babel/runtime": "^7.3.4",
    "core-js": "^3.24.1"
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

.babelrc （ 项目根目录）

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}
1
2
3
4
5
6
7
8
9
10
11
12

webpack.config.js

module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    main: [path.resolve(__dirname, './src/main.js')],
  },
  // 打包的输入
  output: {
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, "./dist")
  },
  // loader相关配置
  module: {
    rules: [
      {
        test: /\.js$/, // 使用正则来匹配 js 文件
        exclude: /node_modules/, // 排除依赖包文件夹
        use: {
          loader: 'babel-loader' // 使用 babel-loader
        }
      }
    ]
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

mian.js

• 需要全局引入：import '@babel/polyfill'

// 全局引入
import '@babel/polyfill'
console.log("main");
import {age} from "./person"
console.log("age",age);
let a = 10;
console.log("a",a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set])
import "./css/main.css"
import "./css/index.scss"
1
2
3
4
5
6
7
8
9
10
11

npm run build 打包效果

webpack构建vue项目 基础03 之压缩js代码

package.json

  "devDependencies": {
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
1
2
3
4
5

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js
  plugins: [
    // 压缩js
    new UglifyJsPlugin()
  ]
1
2
3
4
5