如何配置 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