webpack入门

准备环境

安装 node 和 npm(省略)

新建目录

mkdir learnwebpack
cd learnwebpack

初始化

npm init -y

安装 webpack

npm install webpack webpack-cli -D

创建 src 目录

mkdir src

在 src 下创建 index.js,内容如下

class Example {
    constructor() {
    }
}

const e = new Example();

直接运行 webpack

npx webpack --mode=development

看到 dist/main.js 中的内容,很明显不是兼容 es5 的

安装 babel 相关

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

npm install @babel/runtime @babel/runtime-corejs3

在根目录下创建 webpack.config.js,内容如下

module.exports = {
    module: {
        rules: [
            {
                test: /\.(jsx|js)?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

新建 public 目录

mkdir public

public 目录下新建 index.html

通过html:5+tab自动生成

在 webpack.config.js 添加

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],
  ...
};

添加兼容依赖

npm install cross-env -D

在 package.json 中添加

{
 ...
 "scripts": {
     ...
    "dev": "cross-env NODE_ENV=development webpack",
    "build": "cross-env NODE_ENV=production webpack"
  },
  ...
}

添加 webpack-dev-server,方便在浏览器实时看到结果

npm install webpack-dev-server -D

修改 package.json

{
 ...
 "scripts": {
     ...
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  },
  ...

  devServer: {
    port: "3000",
  },
}