本文基于webpack4.X，使用的包管理工具是yarn

概念相关就不搬运了，直接开始

首先项目初始化

mkdir webpack-demo && cd webpack-demo

yarn init

在项目中安装webpack和webpack-cli(webpack4.X需要)

yarn add webpack webpack-cli --dev

紧接着在项目中创建三个文件src/index.js,dist/index.html,webpack.config.js，

webpack.config.js

const path = require('path')

module.exports = {

  entry: {

    app: path.resolve(__dirname, './src/index.js') // 以src/index.js为项目入口

  },

  output: {

    filename: 'bundle.js',   //打包后的名称

    path: path.resolve(__dirname, 'dist')  //打包后的输出到该目录下

  }

}

src/index.js

import _ from 'lodash'

function createComponent(tag) {

  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')

  return element

}

document.body.append(createComponent('div'))

index.js中引入的一个第三方库 lodash,所以需要安装 执行yarn add lodash

dist/index.html

<!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>webpack demo</title>

</head>

<body>

  <script src="./bundle.js"></script>

</body>

</html>

完成上述步骤后会得到以下项目目录，以index.js为入口，其中依赖于第三方库lodash, 打包输出到dist目录下,

可以看到在index.html中引入了同目录的bundle.js文件，但是现在还没有生成

接着在package.json文件的scripts属性中添加以下语句块

"scripts":{

        "build": "webpack --config webpack.config.js"

    }

添加之后就可以通过 npm run build 或者 yarn build 命令执行打包, --config webpack.config.js表明webpack以该配置文件里的配置项进行打包，如不添加则会使用webpack默认的打包配置

然后执行 yarn build



打包成功，同时dist文件夹下多了一个bundle.js文件,

在浏览器中打开index.html就会看到输出的信息

到此，就成功完成了一个简单的webpack环境构建，然而这只是webpack的基础配置项 entry和output。webpack本身只会识别js文件，

在实际开发中会有css,img,字体图标或者.vue,.jsx等文件，这些文件都可以以模块化的方式添加到项目中。但是这些文件webpack本身并不会识别，主要依赖于loader的解析。

同时文中还需要手动添加index.html文件，这个可以通过plugins进行自动创建html文件。

本篇章中涉及到的几个依赖包

下一篇 从0构建webpack开发环境(二) 添加css,img的模块化支持

从0构建webpack开发环境(一) 一个简单webpack.config.js的更多相关文章

  1. javascript常用开发笔记：一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  2. react学习笔记（一）用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  3. Python黑帽编程1.2 基于VS Code构建Python开发环境

    Python黑帽编程1.2  基于VS Code构建Python开发环境 0.1  本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks Atta ...

  4. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  5. JDK1.7+eclipse 4.4(luna)+pydev4.4.5构建django开发环境

    最近一直用pycharm搞django学习,但是到2017年随着版本的不断更新,启动之慢,吃资源吃内存越来越严重.果然想找一个IDE替代品. 之前用java开发分布式WEB应用,用eclipse开了N ...

  6. XamarinForms教程构建XamarinForms开发环境

    构建XamarinForms开发环境 所谓Xamarin.Forms的开发环境,就是指在基本硬件和数字软件的基础上,为支持系统软件和应用软件的工程化开发和维护而使用的一组软件,简称SDE.对于任何的程 ...

  7. Eclipse中构建scala开发环境的步骤

    Eclipse是一款非常使用的开发工具,熟悉它的童鞋应该都知道,它不仅是最常用的android开发工具,还是最常用的Java开发工具.既然eclipse如此重要,本文小编就和大家一起来扒一扒在ecli ...

  8. 第0课 - 搭建开发环境之安装QT

    第0课 - 搭建开发环境之安装Qt 1. 课程学习的原材料 — Visual Studio 2010 — Qt SDK 4.7.4 — Qt Creator 2.4.1 2. Visual Studi ...

  9. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

随机推荐

  1. PHP基础教程 常见PHP错误类型及屏蔽方法

    程序只要在运行,就免不了会出现错误,错误很常见,比如Error,Notice,Warning等等.这篇文章兄弟连PHP培训 小编来跟大家具体说一下PHP的错误类型和屏蔽方法.在 PHP 中,主要有以下 ...

  2. Activiti7入门(五)

    1 创建流程 首先选中存放图形的目录(本次我们选择 resources 下的 bpmn 目录),点击菜单: New-BpmnFile,如下图所示: 起完名字 holiday 后(默认扩展名为 bpmn ...

  3. Leetcode 4. Median of Two Sorted Arrays(中位数+二分答案+递归)

    4. Median of Two Sorted Arrays Hard There are two sorted arrays nums1 and nums2 of size m and n resp ...

  4. @media兼容iphone4、5、6

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-device-pixe ...

  5. USACO2018 DEC(Platinum) (树上乱搞，期望+凸包)

    发现这跟\(Gold\)难度简直天差地别啊.. \(T1\) 传送门 解题思路 这道题还是很可做的,发现题意可以传化成一棵树每次从叶子节点删边,然后有\(m\)条限制,形如\(a\)在\(b\)前面删 ...

  6. 170911-关于maven的知识点

    简介:    什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的. Maven的好处? 节省空间 就是对jar包的统一管理就是对jar包的统一管理,依赖 ...

  7. 手机H5设计尺寸

    手机型号 导航栏和状态栏的高度 宽度 高度 可视区域高度 iPhone 4 (4, 4S) 64px 320px 480px 416px iPhone 5 (5c, 5s) 64px 320px 56 ...

  8. commons-collections包中的常用的工具类

    commons-collections包中的常用的工具类 <dependency> <groupId>commons-collections</groupId> & ...

  9. list转datatable,SqlBulkCopy将DataTable中的数据批量插入数据库

    /// <summary> /// 将泛类型集合List类转换成DataTable /// </summary> /// <param name="list&q ...

  10. flex embed 使用

    Flex 软件中经常需要使用一些外部的资源,如图片.声音.SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile)到软件中,也就是直接嵌入资源(Em ...