本文基于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. Java——容器（Collection）

    Collection是一个接口,定义了一系列的方法.   [常见方法]  

  2. Java 静态初始化块等的执行顺序

    实例代码 package text; class Root { static{ System.out.println("Root的静态初始化块"); } { System.out. ...

  3. [BZOJ4558]:[JLoi2016]方（容斥+模拟）

    题目传送门 题目描述 上帝说,不要圆,要方,于是便有了这道题.由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形上帝把我们派到了一个有N行M列的方格图上,图上一共有$(N+1)\times ...

  4. 大数据笔记（十七）——Pig的安装及环境配置、数据模型

    一.Pig简介和Pig的安装配置 1.最早是由Yahoo开发,后来给了Apache 2.支持语言:PigLatin 类似SQL 3.翻译器 PigLatin ---> MapReduce(Spa ...

  5. ORACLE权限管理—创建只读账号

    创建只读用户:grant connect to user; grant create session to user; 1.创建角色 CREATE ROLE SELECT_ROLE 2.给角色分配权限 ...

  6. python 调用C++ DLL,传递int,char,char*，数组和多维数组

    ctypes 数据类型和 C数据类型 对照表 ctypes type C type Python type c_bool _Bool bool (1) c_char char 1-character ...

  7. fedora如何使用themes主题?

    DBus: 是一个 local 的IPC 进程间通信机制 如果是(一对一) 多对多的通信, 则DBUS 后台充当了一个路由器的角色. ibus: 是包含: python gtk dbus的 scim- ...

  8. 职位-CIO：CIO

    ylbtech-职位-CIO:CIO 首席信息官(又称CIO,是Chief Information Officer的缩写)中文意思是首席信息官或信息主管,是负责一个公司信息技术和系统所有领域的高级官员 ...

  9. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第6节 static静态_15_静态代码块

    static的特殊用法, 静态代码块 加上构造方法,做测试 又创建一个对象 静态代码块 只执行一次 后续在学习jdbc的时候,静态代码块很有用途.

  10. value_counts()函数

    value_counts函数用于统计dataframe或series中不同数或字符串出现的次数 ascending=True时,按升序排列. normalize=True时,可计算出不同字符出现的频率 ...