webpack4.29.x成神之路（二）起步

時間 2019-11-07

標籤 webpack4.29.x webpack 之路起步简体版

原文原文鏈接

1、webpack安裝

首先新建一個空文件夾，在改文件夾下打開命令行，輸入npm init -y 建立一個package.json文件。html

而後在package.json中填好一些基本信息，一個基本的package.json內容大體以下：
package.jsonnode

{
  "name": "webpack-train",
  "version": "1.0.0",
  "description": "webpack4",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lycHub/webpack-train.git"
  },
  "keywords": ["webpack4"],
  "author": "Madao",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lycHub/webpack-train/issues"
  },
  "homepage": "https://github.com/lycHub/webpack-train#readme"
}

webpack推薦使用局部的安裝方式，即在項目根目錄下執行以下命令：webpack

npm install webpack webpack-cli -D

而後會多出一個node_modules的目錄，這個目錄將會存放各類工具包。git

2、準備工做

在打包前，咱們先來新建一下目錄和文件，並添加內容github

index.html：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    
</div>
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js"></script>
<script src="./src/index.js"></script>
</body>
</html>

src/index.js：npm

window.addEventListener('DOMContentLoaded', function() {
  function component() {
    const root = document.getElementById('root');
    root.innerHTML = _.join(['Hello', 'webpack'], ' ');
  }
  
  component();
});

此時打開瀏覽器運行index.html，頁面應該能出現 Hello webpackjson

3、webpack打包方式介紹

方法一：
根目錄下執行：segmentfault

.\node_modules\.bin\webpack

而後webpack會執行打包命令並在根目錄下生成dist文件夾：

npx webpack

npx是npm自帶的一個命令，效果同方法一

方法三（推薦）：

在package.json的scripts選項中添加以下任務

而後在根目錄下執行

npm run build

也能夠打包成功並生成dist文件

4、測試打包後的代碼

webpack默認會將src/index.js打包生成main.js並放入dist文件夾中，現將index.html複製到dist中並作以下修改
dist/index.html：

<!-- 省略部分代碼 -->
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js"></script>
<!-- <script src="./src/index.js"></script> -->
<script src="./main.js"></script>
<!-- 省略部分代碼 -->

而後打開瀏覽器運行dist/index.html