溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
團隊使用的 webpack 功能很強大，有時候會碰到編譯失敗的情況，總得找工具的作者解決問題，自己很少去追究原因，感覺對于 webpack 的認知總是一知半解。因此，從本篇文章開始，自己從零開始配置 webpack，認真體驗一下配置過程。文章內容過于簡單，如果有 webpack 使用經驗的人，就不用往下看啦。
版本說明
本文使用的 webpack 的版本為：4.30.0
開始搭建
本文的目的是使用 webpack 完成 es6 的編譯，沒想到過程過于簡單。
安裝 node 與 npm 鏡像
安裝 node
安裝 npm 淘寶鏡像
安裝 webpack 與 webpack-cli
打開或者新建一個項目，使用命令行安裝 webpack 與 webpack-cli：
$ cnpm install --save-dev webpack-cli
安裝 es6 的編譯組件
使用命令行安裝 babel-loader：
$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
創建文件目錄
我創建的文件目錄如下：
webpack-es6 |- /dist |- index.html |- /src |- index.js
定義打包的入口與出口
項目目錄下新建 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 文件的處理規則
在 webpack.config.js 文件中添加 js 文件的處理規則：
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 的配置，此時的文件目錄如下：
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/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
