javascript复习：webpack 和 babel

JavaScript 评论

为什么用 webpack 和 babel

  • ES6 模块化，浏览器暂不支持
  • ES6 语法，浏览器并不完全支持
  • 压缩代码，整合代码，让网页加载更快

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
npm init -y

 ✔  npm init -y
Wrote to /Users/magicyou/www/test_webpack/package.json:
{
  "name": "test_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install webpack webpack-cli -D

✔  npm install webpack webpack-cli -D
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/ .........
...
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test_webpack@1.0.0 No description
npm WARN test_webpack@1.0.0 No repository field.

+ webpack-cli@4.8.0
+ webpack@5.52.1
added 121 packages from 158 contributors and audited 121 packages in 60.95s

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

found 0 vulnerabilities

安装完的package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "test_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }
}

安装插件 html-webpack-plugin，解析html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install html-webpack-plugin -D

 ✔  npm install html-webpack-plugin -D
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/...
...
+ html-webpack-plugin@5.3.2
added 33 packages from 19 contributors and audited 154 packages in 9.446s

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

found 0 vulnerabilities

安装插件 webpack-dev-server，解析html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install webpack-dev-server -D

✔  npm install webpack-dev-server -D
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/...

...
npm WARN test_webpack@1.0.0 No description
npm WARN test_webpack@1.0.0 No repository field.

+ webpack-dev-server@4.2.1
added 205 packages from 139 contributors and audited 359 packages in 37.916s

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

found 0 vulnerabilities

webpack.config.js 添加 html-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',  // 开发模式  development / production
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    pliugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),  // 模板文件
            filename: 'index.html'   // 产出文件
        })
    ],
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'dist')
    }
};

ES6 转化成 ES5，安装 babel

1
2
3
4
5
6
7
8
9
10
npm install @babel/core @babel/preset-env  babel-loader -D 

✔  npm install @babel/core @babel/preset-env  babel-loader -D                                                                                                                      14s 21:01:56

added 152 packages, and audited 512 packages in 53s

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

found 0 vulnerabilities

此时的package.json

1
2
3
4
5
6
7
8
9
"devDependencies": {
    "@babel/core": "^7.6.2",
  "@babel/preset-env": "^7.6.2",
  "babel-loader": "^8.0.6",
  "html-webpack-plugin": "^3.2.0",
  "webpack": "^4.41.0",
  "webpack-cli": "^3.3.9",
  "webpack-dev-server": "^3.8.2"
}

配置babel

创建 .babelrc 文件

1
2
3
{
    "presets": ["@babel/preset-env"]
}

对生产环境单独做配置

  • 创建文件 webpack.prod.js；
  • 修改 ’mode‘ 为 ‘production’ ，打包出来的文件就会压缩成一行，体积减小，加载速度快
  • output 优化，添加 ’[contenthash]‘，文件改动就重新生成文件名，防止读取缓存
    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
    27
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        mode: 'production',  // 开发模式  development / production
        entry: path.join(__dirname, 'src', 'index.js'),
        output: {
            filename: 'bundle.[contenthash].js',
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: path.join(__dirname, 'src'),
                    exclude: /node_modules/
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html'),  // 模板文件，指定已有的html文件
                filename: 'index.html'   // 产出文件
            })
        ]
    };

BruceLeeWeb Developer

个人简介。