欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用webpack編譯es6代碼的方法步驟

 更新時(shí)間：2019年04月28日 09:48:24   作者：NingBo  
這篇文章主要介紹了使用webpack編譯es6代碼的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

團(tuán)隊(duì)使用的 webpack 功能很強(qiáng)大，有時(shí)候會(huì)碰到編譯失敗的情況，總得找工具的作者解決問(wèn)題，自己很少去追究原因，感覺(jué)對(duì)于 webpack 的認(rèn)知總是一知半解。因此，從本篇文章開(kāi)始，自己從零開(kāi)始配置 webpack，認(rèn)真體驗(yàn)一下配置過(guò)程。文章內(nèi)容過(guò)于簡(jiǎn)單，如果有 webpack 使用經(jīng)驗(yàn)的人，就不用往下看啦。

版本說(shuō)明

本文使用的 webpack 的版本為：4.30.0

開(kāi)始搭建

本文的目的是使用 webpack 完成 es6 的編譯，沒(méi)想到過(guò)程過(guò)于簡(jiǎn)單。

安裝 node 與 npm 鏡像

安裝 node
安裝 npm 淘寶鏡像

安裝 webpack 與 webpack-cli

打開(kāi)或者新建一個(gè)項(xiàng)目，使用命令行安裝 webpack 與 webpack-cli：

$ cnpm install --save-dev webpack-cli

安裝 es6 的編譯組件

使用命令行安裝 babel-loader：

$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack

創(chuàng)建文件目錄

我創(chuàng)建的文件目錄如下：

webpack-es6
 |- /dist
 |- index.html
 |- /src
 |- index.js

定義打包的入口與出口

項(xiàng)目目錄下新建 webpack.config.js 文件，并按照文件目錄配置打包的入口和出口：

const path = require('path');
module.exports = {
 entry: './src/index.js', // 定義入口 js ，也就是編譯前的 js
 output:{
  filename:'index.js', // 定義打包輸出的 js 的文件名
  path:path.resolve(__dirname,'dist') // 輸出 js 的目錄
 }
};

添加 js 文件的處理規(guī)則

在 webpack.config.js 文件中添加 js 文件的處理規(guī)則：

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 腳本：

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

配置完成

以上就完成了 webpack 打包 es6 的配置，此時(shí)的文件目錄如下：

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

添加代碼

接下來(lái)我們添加代碼測(cè)試配置是否成功。

文件 ./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>

編譯程序

運(yùn)行命令行

$ npm run build

打開(kāi) index.html ，如果頁(yè)面中有 success ，則說(shuō)明 es6 編譯完成。

總結(jié)

沒(méi)想到 webpack 編譯 es6 配置如此簡(jiǎn)單，下一步使用 webpack 編譯 postcss 。

參考鏈接

webpack 中文網(wǎng)：www.webpackjs.com/

 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論