本文共 1474 字，大约阅读时间需要 4 分钟。

从这篇开始，会不定期更新webpack教程。希望能帮到在路上的小伙伴

准备：1.安装node.js环境并配置好

安装webpack

tip: 安装之前一定要先安装node .

1. 新建文件夹并进入

打开命令框工具，输入

npm init

现在文件夹下会生成一个package.json文件，这个文件包含项目基本信息：

// 
   {
   "name": "webpackdemo", // 项目名称"version": "1.0.0", // 项目版本"description": "", // 描述"main": "index.js", // 执行的入口文件"scripts": {
    // 配置项目命令	"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [], // 关键字"author": "", // 作者(这里指开发者)"license": "ISC", // 标准(这个默认就ok)"dependencies": {
    // 生产环境需要的依赖包},"devDependencies": {
    // 本地开发需要的依赖	"webpack": "^4.32.2", // 安装包	"webpack-cli": "^3.3.2"}}

接下来安装webpack,2种方法，一种是全局安装(通常我们不建议全局安装，因为每个项目需要的webpack版本可能会有不同，这里我们只说项目内安装)，

项目内安装

npm install webpack webpack-cli --save-dev 等同于

npm install webpack webpack-cli --save-dev

安装完成后，输入 npx webpack -v 出现版本号说明安装成功

npx webpack -v

现在新建文件，来体验下文件打包是什么样的

在文件夹的根目录下新建 index.html 文件，以及src文件夹。在src文件夹下面新建 index.js文件，并将下面相应的代码复制

index.html

   
   
   
   
    欢迎来到蔓羊博客
   
  
   

index.js

window.onload = function(){
     var dom = document.createElement('div');  var root = document.getElementById('root');  dom.innerHTML = '这是我的测试博客';    root.appendChild(dom);}

现在项目目录应该是这样：

webpackdemo|- node-modules|- src|- index.html|- index.js|- package.json|- package-lock.json

建好了之后，打开git命令行工具，输入下面的命令。这个时候根目录下面会生成一个dist文件夹(ps:也就是通常所说的打包之后的文件)

npx webpack index.js

npx：是webpack内置的打包命令。打包配置文件也是webpack默认的打包配置

转载地址：http://eizsi.baihongyu.com/