Webpack的安裝與配置

時間 2019-11-24

標籤 webpack 安裝配置简体版

原文原文鏈接

上一篇文章中出現的錯誤，其實能夠基於 webpack 把這種有兼容性的代碼轉換成沒有兼容性的代碼，再引入轉換以後的 js 文件就可，具體實現以下：html

1. 安裝包

在終端中運行以下命令，安裝 webpack 相關的包webpack

npm install webpack webpack-cli -D

2. 建立配置文件

在項目的根目錄中，建立 webpack.config.js 的 webpack 配置文件,而且初始化以下配置：web

module.exports = { 
    mode: 'development' //mode用來指定構建模塊
}

3. 新增腳本

在 package.json 配置文件中的 package.json scripts 節點下，新增 dev 腳本，(原有腳本保留):shell

'scripts': {
    'dev': 'webpack' // script 節點下的腳本，能夠經過 npm run 執行
}

4. 項目打包

在終端中運行以下命令，啓動 webpack 進行項目打包npm

npm run dev

打包完成以後，會自動建立一個 dist 文件夾，裏面包含一個 main.jsn ,此時再回到 src -> index.html 中，從新引入打包以後的 js文件，代碼以下圖：json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 傳統模式是以下引入，可是咱們要用模塊化思惟 -->
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.js"></script>
</head>
<body>
    <ul>
        <li>這是第 1 個li</li>
        <li>這是第 2 個li</li>
        <li>這是第 3 個li</li>
        <li>這是第 4 個li</li>
        <li>這是第 5 個li</li>
        <li>這是第 6 個li</li>
        <li>這是第 7 個li</li>
        <li>這是第 8 個li</li>
        <li>這是第 9 個li</li>
    </ul>
</body>
</html>

此時再運行 index.html 文件就不會報錯，運行結果以下圖：
模塊化

這就是 webpack 最基本的安裝與配置，可是在完整的項目中，可能須要你去修改默認的出入口，那要如何配置呢？請看下一篇文章 webpack的配置彙總ui

相關標籤/搜索

每日一句

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