Webpack4 學習筆記 - 01：webpack的安裝和簡單配置

weixin_33807284發表於2019-02-27
Web筆記

安裝 webpack

新建一個Demo資料夾，執行初始化：

npm init

在Demo資料夾裡安裝 webpack 和 webpack-cli ：

npm install webpack webpack-cli -D

webpack-cli 可以使用命令列的方式來使用 webpack，從版本4開始，webpack 和 webpack-cli 分別管理， 如果不安裝 webpack-cli, 就沒法使用命令列了。安裝完之後，執行

webpack -v

檢視安裝是否成功。但是，命令執行後，會給你一個大大的錯誤提示，類似這樣：

webpack: command not found

這是因為 webpack 並非全域性安裝的，當輸入這個命令時，npm 會從全域性的目錄模組中找 webpack，找不到就報錯了。
那怎麼執行剛裝好的 webpack 呢？ 通過 npx 命令來執行就OK了：

npx webpack -v

npx 會尋找存在於專案內node_modules目錄下的安裝包。

建立專案並簡單配置

webpack安裝完畢，接下來就開始寫demo，建立幾個資料夾和檔案，如圖：

clipboard.png

index.html 中的內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4 學習筆記</title>
</head>
<body>
    <div id='root'></div>
    <script src='./dist/bundle.js'></script>
</body>
</html>

header.js中的內容：

function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = '這裡是Header區域';
    dom.append(header);
}

module.exports = Header;

index.js中的內容：

const Header = require('./header.js');

new Header();

webpack.config.js中的內容：

const path = require('path');  // 得到的path為webpack.config.js所在的目錄

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    mode: 'development'
}

其中 webpack.config.js 是 webpack 的預設配置檔案，關於 webpack 的配置資訊預設都要寫到這個檔案中。

entry 是 webpack 要打包的入口檔案，必須要提供一個入口，webpack 才知道從哪裡開始打包，否則會報錯，這裡的入口檔案就是src目錄下的index.js檔案。

output 是出口檔案，即打包過的檔案放到哪裡了。path 就是存放的路徑，path.resolve(__dirname, 'dist') 表示路徑為根目錄下的dist資料夾。filename: 'bundle.js' 表示打包後的檔名為bundle.js。

mode: 'development' 表示當前的工作模式為開發環境，如果不配置 mode 則預設為 production，即生產環境。

簡單配置完成，執行命令：

npx webpack

可以看到檔案已經打包好，webpack自動生成了一個dist目錄，並把bundle.js放在了該目錄下：

clipboard.png

開啟index.html，可以看到內容正確顯示出來：
clipboard.png

OK，一個簡單的配置完成了。

如果不想通過

npx wepack

這個命令來打包，可以在package.json中配置下 scripts：

  "scripts": {
    "bundle": "webpack"
  },

這樣，在命令列輸入

npm run bundle

同樣會完成打包，而且這種配置很靈活，後續可以配置不同的命令來打包出不同的結果。

相關文章