一小时的时间，上手 Webpack

本文由公众号 字节逆旅 的主笔 慢一拍 写作而成，慢一拍 已认证成为图雀社区专栏作者，后续将为大家带来一系列 Webpack 的文章，敬请期待✌️。欢迎加入图雀社区，一起创作精彩的免费技术实战教程，加速技术的传播！

如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程💪

为什么要用构建工具？如果你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是不是蒙的？这种情况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有自己的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你可以在不懂构建工具的情况下进行前端开发。不过这就是初级前端的基本工作，给我一个环境，让我安心的写业务代码。

实际上，仅仅做上述工作也没什么不好，你可以钻研 css，研究js深度语法，甚至去不断精进算法与数据结构都是高级进阶之路。

我想说的是如果你有一天对webpack感兴趣了，ok，欢迎你来到大前端世界！webpack是一个强大且可扩展的前端构建工具，还有包括grunt、gulp等同类工具都是基于node.js为底层驱动平台实现的。

为什么需要构建或者说编译呢？因为像es6、less及sass、模板语法、vue指令及jsx在浏览器中是无法直接执行的，必须经过构建这一个操作才能保证项目运行，所以前端构建打包很重要。除了这些，前端构建还能解决一些web应用性能问题，比如：依赖打包、资源嵌入、文件压缩及hash指纹等。具体的我不再展开，总之前端构建工程化已经是趋势。

至于为什么选择webpack，因为这个工具配置非常灵活，支持插件化扩展，社区生态很丰富，官方迭代更新速度快，作为程序员，这是一个靠谱的选择。

好了，废话不多说，下面直接上干货，教你半小时上手，用webpack构建开发一个小项目。学东西要快，可以不用理解清楚每个概念，先动手，不然等你学会得要一个星期了。

一、node安装

首先要保证你的电脑有node环境，node安装比较简单，直接在官网https://nodejs.org/en/下载node安装包就可以了，注意这里有两个版本，左边是稳定版本，右边是最新版本，一般用稳定版本就可以了。具体的安装过程不是本文的主要内容，网上有很多安装教程。有了node环境，后面就可以通过npm进行webpack的安装，npm是一个包管理工具，安装node就会自动安装npm。如果有必要我可以在我的公众号里也写个教程。

二、webpack安装及配置

1、webpack安装

首先创建一个my_webpack文件夹作为项目文件夹，进入当前文件夹，通过命令行工具cmd执行以下命令：

npm init -y
npm install webpack webpack-cli --save-dev

安装完了检查版本，确认安装成功

 ./node_modules/.bin/webpack -v

安装成功后，文件夹下面会有这些内容

2、webpack配置

然后在根目录创建一个空配置文件webpack.config.js，创建以下内容：

'use strict'
const path = require('path');
module.exports = {
   
    entry: {
   
        index: './src/index.js',
    },
    output: {
   
        path: path.join(__dirname,'dist'),
        filename: 'index.js'
    },
    mode: 'production',
}

entry代表打包入口，output需要指定输出地址及打包出来的文件名，mode指开发环境。然后在项目根目录中创建src文件夹及dist文件夹，src文件夹里创建index.js及hellowebpack.js两个文件，最后在dist目录创建一个index.