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

時間 2019-11-10

標籤 webpack4 webpack 學習筆記安裝簡單配置简体版

原文原文鏈接

安裝 `webpack`

新建一個Demo文件夾，執行初始化：html

npm init

在Demo文件夾裏安裝 webpack 和 webpack-cli ：node

npm install webpack webpack-cli -D

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

webpack -v

查看安裝是否成功。可是，命令執行後，會給你一個大大的錯誤提示，相似這樣：web

webpack: command not found

這是由於 webpack 並不是全局安裝的，當輸入這個命令時，npm 會從全局的目錄模塊中找 webpack，找不到就報錯了。
那怎麼運行剛裝好的 webpack 呢？經過 npx 命令來運行就OK了：npm

npx webpack -v

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

建立項目並簡單配置

webpack安裝完畢，接下來就開始寫demo，建立幾個文件夾和文件，如圖：app

index.html 中的內容：dom

<!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中的內容：ui

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放在了該目錄下：

打開index.html，能夠看到內容正確顯示出來：

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

若是不想經過

npx wepack

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

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

這樣，在命令行輸入

npm run bundle

一樣會完成打包，並且這種配置很靈活，後續能夠配置不一樣的命令來打包出不一樣的結果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

安裝 webpack

建立項目並簡單配置

安裝 `webpack`