本文基于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. linux运维、架构之路-SSH远程管理服务

    一.SSH服务功能介绍 1.远程登录管理 提供类似telnet远程联机服务器的服务,即上面提到的SSH服务 2.远程传输文件 是类似FTP服务的sftp-server,借助SSH协议来传输数据的,提供 ...

  2. ExoPlayer + 边缓存边播放

    在此基础上改动:https://www.cnblogs.com/candyzhmm/p/9957928.html private void openPlayer(String videoUrl) { ...

  3. web上传大文件(>4G)有什么解决方案?

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  4. 1.Windows下安装nginx

    1.  到nginx官网http://nginx.org/上下载相应的安装包 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图所示:   进入window的cm ...

  5. 【转】DataRow复制一行到另一个DataTable

     源地址:http://www.cnblogs.com/pains/archive/2007/11/22/969003.html   下面两个方法是DataRow复制一行到另一个DataTable的, ...

  6. javaweb阶段几个必会面试题

    1.jsp的9大隐式对象 response(page):response对象是javax.servlet.http.HttpServletResponse对象的一个实例.就像服务器创建request对 ...

  7. PhantomJs 与 Casperjs

    利用PhantomJS做网页截图经济适用,但其API较少,做其他功能就比较吃力了. CasperJs是对phantomjs的一次封装.即phantomjs是原生的,而casperjs是封装在以phan ...

  8. WebSocket知识、轮询、长轮询、长连接

    一.WebSocket理论知识 1.什么是websocket WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消 ...

  9. kafka consumer 自动提交 offset

    org.apache.kafka.clients.consumer.KafkaConsumer#pollOnce private Map<TopicPartition, List<Cons ...

  10. delphi备份恢复剪切板

    http://blog.csdn.net/youthon/article/details/7327776 delphi备份恢复剪切板         分类:            Delphi编程20 ...