一步步使用 webpack 第一篇：使用 webpack 编译 es6 代码

时间 2019-11-06

标签步步使用 webpack 一篇编译 es6 代码栏目 JavaScript 繁體版

原文原文链接

前言

团队使用的 webpack 功能很强大，有时候会碰到编译失败的状况，总得找工具的做者解决问题，本身不多去追究缘由，感受对于 webpack 的认知老是只知其一;不知其二。所以，从本篇文章开始，本身从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，若是有 webpack 使用经验的人，就不用往下看啦。javascript

版本说明

本文使用的 webpack 的版本为：4.30.0css

开始搭建

本文的目的是使用 webpack 完成 es6 的编译，没想到过程过于简单。html

安装 node 与 npm 镜像

安装 node
安装 npm 淘宝镜像

安装 webpack 与 webpack-cli

打开或者新建一个项目，使用命令行安装 webpack 与 webpack-cli：java

$ cnpm install --save-dev webpack-cli
复制代码

安装 es6 的编译组件

使用命令行安装 babel-loader：node

$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
复制代码

建立文件目录

我建立的文件目录以下：webpack

webpack-es6
  |- /dist
    |- index.html
  |- /src
    |- index.js
复制代码

定义打包的入口与出口

项目目录下新建 webpack.config.js 文件，并按照文件目录配置打包的入口和出口：git

const path = require('path');
module.exports = {
    entry: './src/index.js', // 定义入口 js ，也就是编译前的 js
    output:{
        filename:'index.js', // 定义打包输出的 js 的文件名
        path:path.resolve(__dirname,'dist') // 输出 js 的目录
    }
};
复制代码

添加 js 文件的处理规则

在 webpack.config.js 文件中添加 js 文件的处理规则：es6

const path = require('path');
module.exports = {
    entry: './src/index.js', 
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }，
    // 如下代码为新添加代码
    module:{
        rules:[
            {
                test: /\.js$/, // 匹配全部 js 文件
                loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
            },
        ]
    },
};
复制代码

添加 npm 脚本

在 package.json 文件中添加 npm 脚本：github

{
    //... 省略代码
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" // 添加此行，使用 build 命令代替 npx 命令
    },
    //... 省略代码
  }
复制代码

配置完成

以上就完成了 webpack 打包 es6 的配置，此时的文件目录以下：web

webpack-es6
    |- node_modules
    |- /dist
        |- index.html
    |- /src
        |- index.js
    |- package.json
    |- package-lock.json
    |- webpack.config.js
    
复制代码

添加代码

接下来咱们添加代码测试配置是否成功。

文件 ./src/index.js 添加代码：

class Class{
  constructor() {
    this.str = 'success';
  }
  appendToBody(){
    const p = document.createElement('p');
    p.innerHTML = this.str;
    document.body.appendChild(p);
  }
}
const obj = new Class();
obj.appendToBody();
复制代码

文件 ./dist/index.html 添加代码：

</html>
<body></body>
<script src="./index.js"></script>
</html>
复制代码

编译程序

运行命令行

$ npm run build
复制代码

打开 index.html ，若是页面中有 success ，则说明 es6 编译完成。

总结

没想到 webpack 编译 es6 配置如此简单，下一步使用 webpack 编译 postcss 。

参考连接

webpack 中文网：www.webpackjs.com/