首页 » 文章 » 文档 » 开发运行环境 » 如何配置 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

»开发运行环境

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top