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

这样就完成了webpack的安装与基本的打包操做，只不过打包时用的都是默认配置

下节：基本配置与mode

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

1、webpack安装

2、准备工做

3、webpack打包方式介绍

4、测试打包后的代码

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