一、优化项目结构，创建相关的文件,项目结构如下：

src文件夹存放相关js文件，index.html项目的首页面，dist文件夹是webpack 打包 目录。

index.js内容为：

alert('我就是webpack');

index.html内容为:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

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

</head>

<body>

</body>

</html>

这里引用bundle.js是用webpack编译之后的文件，这里不要写src/index.js，如果index.js里面涉及到require('./a')这样的语法，不经过编译浏览器是无法识别的。

二、创建 webpack.config.js

如果对 gulpfile.js和Gruntfile.js比较了解的话， 对webpack.config.js就比较容易了解，webpack.config.js是webpack的入口，里面配置webpack运行时的相关的参数。webpack.config.js就是webpack的指挥官，他来指挥webpack都是做哪些事情，如何去做。

创建之后的目录结构：

三、WebPack的配置

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

     //页面入口文件配置

     entry: {

        index: './src/index.js'

     },

     //入口文件输出配置

     output: {

        path: __dirname,

        filename: "bundle.js"

      }  

    }};

 

第一步、使用require 导入webpack

var webpack = require('webpack');

把这句话当作 在html页面使用<script src="webpakc.js"></script>引用webpack文件。

第二步:声明webpack提供的提取文件公共部分的对象

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

CommonsChunkPlugin 是webpack的一个插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。 什么意思哪？例如:

a.js

function a(){

}

b.js

function a(){

}

a.js和b.js都同样有a函数，如果一个js文件同时引用这两个js文件，webpack 在运行的时候会把这两个函数提取到common.js文件，并且只留下一个，因为它们相同。

第三步：使用module.exports配置webpack的相关参数和方法

  1. entry 是页面入口文件配置，

  2. output 是对应输出项配置 （即入口文件最终要生成什么名字的文件、存放到哪里），__dirname表示当前项目的目录，nodejs语法。

第四步、执行编译命令

目前为止webpack的基本配置都已经完成了， 这个时候就需要在项目根目录，执行webpack编译命令。

webpack

这个时候项目中就会生成bundle.js文件，bundle.js文件的内容如下：

/******/ (function(modules) { // webpackBootstrap

/******/ 	// The module cache

/******/ 	var installedModules = {};

/******/ 	// The require function

/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache

/******/ 		if(installedModules[moduleId])

/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)

/******/ 		var module = installedModules[moduleId] = {

/******/ 			exports: {},

/******/ 			id: moduleId,

/******/ 			loaded: false

/******/ 		};

/******/ 		// Execute the module function

/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded

/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module

/******/ 		return module.exports;

/******/ 	}

/******/ 	// expose the modules object (__webpack_modules__)

/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache

/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__

/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports

/******/ 	return __webpack_require__(0);

/******/ })

/************************************************************************/

/******/ ([

/* 0 */

/***/ function(module, exports) {

	alert('我就是webpack');

/***/ }

/******/ ]);

第五 步、  运行index.html

目前为止所有的工作都已经做完了，这个时候运行index.html文件

四、总结

webpack的使用非常的方便，只需要安装、配置、 执行命令，就可以完成了。webpack配置文件有很多的参数可以进行设置。以后章节我们将 逐步讲解高级配置以及模块之间的依赖引用。

Webpack的基本配置的更多相关文章

  1. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  2. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...

  3. webpack 多entry 配置

    // webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...

  4. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  5. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  6. Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. webpack 4+ vue-loader 配置 (完善中...)

    webpack 4+ vue-loader 配置 写的demo,clone下来后,npm run dev即可,(此demo并未加入router) 可能会由于版本问题,配置会有些许改动,暂时都是可用的 ...

  8. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  9. webpack 4.0配置2

    上个博客记录了webpack 的基本配置今天主要是css-loader的介绍,包括单独提出css,压缩css.js文件 这里使用的插件npm 地址:https://www.npmjs.com/pack ...

随机推荐

  1. 错误：readline/readline.h：没有那个文件或目录解决方法

    curl -R -O http://www.lua.org/ftp/lua-5.3.0.tar.gz tar zxf lua-5.3.0.tar.gz cd lua-5.3.0 make linux ...

  2. EFI、UEFI、MBR、GPT的区别

    UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...

  3. 利用PowerDesigner15在win7系统下对MySQL 进行反向工程（二）

    利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1.打开PowerDesigner,建立新模型,选择Physical Data Model中的Physical Da.. ...

  4. Caused by: java.lang.ClassNotFoundException: org.aspectj.lang.annotation.Around

    1.错误描述 INFO:2015-05-01 11:12:15[localhost-startStop-1] - Root WebApplicationContext: initialization ...

  5. C#:几种数据库的大数据批量插入

    在之前只知道SqlServer支持数据批量插入,殊不知道Oracle.SQLite和MySql也是支持的,不过Oracle需要使用Orace.DataAccess驱动,今天就贴出几种数据库的批量插入解 ...

  6. docker学习系列（一）：docker 基础

    一.简介 开发当中比较麻烦的问题在于软件配置,每个人的机械以及系统都不尽相同,程序需要运行在系统当中需要配置好相应的系统以及各种依赖的组件,但是很多时候由于各种软件依赖包的版本,系统兼容性问题会导致程 ...

  7. css3动画结束捕捉事件整理

    //捕捉webkitAnimationEnd事件 element.addEventListener('webkitAnimationEnd', end, false); //捕捉webkitTrans ...

  8. 简述“类（class）”，“类库（class library）”，“包（package）”，“jar文件”这四个概念间的关系

    (1)类(class)实际上是对某种类型的对象定义变量和方法的原型,它表示对现实生活中的一类具有共同特征的事物的抽象. (2)为了更好地组织类,java提供了包机制.包(package)是类的容器,用 ...

  9. CF922 CodeForces Round #461(Div.2)

    CF922 CodeForces Round #461(Div.2) 这场比赛很晚呀 果断滚去睡了 现在来做一下 A CF922 A 翻译: 一开始有一个初始版本的玩具 每次有两种操作: 放一个初始版 ...

  10. BSGS算法(大步小步算法)

    计算\(y^x ≡ z \ mod\ p\) 中 \(x\) 的解. 这个模板是最小化了\(x\) , 无解输出\(No \ Solution!\) map<ll,ll>data; ll ...