如何配置 webpack 和 babel

使用 webpack 和 babel 的意义

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

初始化一个 npm 环境，生成 package.json 文件

// 初始化 package.json 文件
npm init -y

顺便看下最终的 package.json 文件内容

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "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"
  }
}

一顿操作猛如虎安装 webpack 和 babel 各种插件，可以使用淘宝代理 --registry=https://registry.npm.taobao.org

// 安装 webpack
npm install webpack webpack-cli -D
// 安装 html-webpack-plugin，用于解析 html
npm install html-webpack-plugin -D
// 安装 webpack-dev-server，用于启动服务
npm install webpack-dev-server -D
// 安装 babel 相关插件，用于 es6 转 es5
npm install @babel/core @babel/preset-env babel-loader -D

增加一个 webpack.config.js 用于开发时的配置

const path = require('path'); // node 环境的 path
// 引入 webpack 解析 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development', // 模式 production
  entry: path.join(__dirname, 'src', 'index.js'), //入口文件
  output: {
    // 输出文件
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'), // build 后的目录
  },
  module: {
    // 模块
    rules: [
      {
        // es6 转 es5
        test: /.js$/,
        loader: ['babel-loader'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    // 插件
    new HtmlWebpackPlugin({
      //引入的模板
      template: path.join(__dirname, 'src', 'index.html'),
      //产生的文件
      filename: 'index.html',
    }),
  ],
  devServer: {
    // http服务
    port: 8088, //端口
    contentBase: path.join(__dirname, 'dist'), // 运行的根目录
  },
  stats: { children: false }, //解决 Entrypoint undefined = index.html 的错误
};

根据 webpack.config.js 内容可知，需要在同级的 src 目录增加 index.html，index.js 两个文件，dist 目录在 build 时会自动生成，此时执行命令

// 运行 webpack 开发环境
npm run dev

可以启动一个 webpack 开发环境服务，访问：

http://localhost:8088/index.html

等等，如果需要 babel 的支持，还需要增加一个 .babelrc 文件，配置 babel 环境来调用 @babel/core 插件转义 es6 语法

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

顺带插入一下 ES6 模块化规范的问题，a.js 文件

export function fn() {
  console.log('fn');
}
export const name = 'a';
export const obj = {
  name: 'zhangshan',
};

b.js文件

function fn() {
  console.log('fn');
}
const name = 'b';
const obj = {
  name: 'lishi',
};
export { fn, name, obj };

c.js 文件

const a = {
  name: 'a',
};
const b = 'b';
export default {
  a,
  b,
};

用 index.js 文件来调用

// es 6 语法
const sum = (a, b) => {
  return a + b;
};
console.log(sum(1, 2)); // 3
// 解构赋值
// import {fn, name, obj} from "./a";
import { fn, name, obj } from './b';
import c from './c';
fn(); //
console.log(name); // b
console.log(obj.name); // lishi
console.log(c.a, c.b); // {name: "a"} "b"

最后配置下 webpack 的生产环境的 webpack.prod.js 文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'production', //
  entry: path.join(__dirname, 'src', 'index.js'), //入口文件
  output: {
    // contenthash 用于生成类似 bundle.373515fc1573230aee90.js 的文件
    filename: 'bundle.[contenthash].js',
    path: path.join(__dirname, 'dist'), // build 后的目录
  },
  module: {
    rules: [
      {
        // es6 转 es5
        test: /.js$/,
        loader: ['babel-loader'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      //引入的模板
      template: path.join(__dirname, 'src', 'index.html'),
      //产生的文件
      filename: 'index.html',
    }),
  ],
  stats: { children: false }, //解决 Entrypoint undefined = index.html 的错误
};

最后执行命令，会在 dist 目录中生成打包后的文件

// 运行 webpack 打包
npm run build

如何配置 webpack 和 babel ​

如何配置 webpack 和 babel