團隊使用的 webpack 功能很強大,有時候會碰到編譯失敗的狀況,總得找工具的做者解決問題,本身不多去追究緣由,感受對於 webpack 的認知老是隻知其一;不知其二。所以,從本篇文章開始,本身從零開始配置 webpack,認真體驗一下配置過程。文章內容過於簡單,若是有 webpack 使用經驗的人,就不用往下看啦。javascript
本文使用的 webpack 的版本爲:4.30.0
css
本文的目的是使用 webpack 完成 es6 的編譯,沒想到過程過於簡單。html
打開或者新建一個項目,使用命令行安裝 webpack
與 webpack-cli
:java
$ cnpm install --save-dev webpack-cli
複製代碼
使用命令行安裝 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 的目錄
}
};
複製代碼
在 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 文件
},
]
},
};
複製代碼
在 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/