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

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. 使用sql语句获取数据库表的信息

    下面的sql语句可以查看表的信息.其中modify_date和create_date可以根据表的修改时间来查看.如果不需要删除后,就能看到所有表的字段信息 ) PERCENT d.name AS 表名 ...

  2. linux系统/sbin/init执行过程

    对于Linux的启动过程,之前一直都是研究到内核运行/sbin/init,启动第一个用户进程为止,因为这部分一直都是在内核态工作,所以对于学习内核还是有帮助的,当时/sbin/init之后的过程也需要 ...

  3. 【javascript】jQuery判断用户右击事件

    jquery 判断用户是鼠标是右击还是左击, // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(document).mousedown(function(e) { if(3 ...

  4. （二十三）mongodb中group的问题

    今天的工作中我需要从mongodb数据库中查出一定的数据,并排序后返回给前台,数据库表中包含了ruleID,processingID,userID,updateTime等字段.    同一个ruleI ...

  5. 使用Gulp进行代码压缩的步骤以及配置

    一.安装步骤 1.首先确定是否安装了node.js,如果未安装,请先安装node.js: 2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g: 3.安装gulp: ...

  6. input 和button的区别

    一,区别一 先来看一个问题 <input type="button" class="btn-upload bg-org-code" name=" ...

  7. 小程序for循环中通过index实现单个点击事件

    <!--xml--> <view class='content3-list' wx:for="{{listItems}}" > <view class ...

  8. Python Web-第五周-Web Services and XML（Using Python to Access Web Data）

    1.Web Service Overview 1.Data on the Web Python Dictionary 和 Java HashMap间需要建立一个桥梁,可以用XML或是JSON 2.XM ...

  9. Entity Framework Core 2.1 Preview1 新增功能简介

    两个星期前,微软发布了EF Core 2.1 Preview 1,同时还发布了.NET Core 2.1 Preview 1和ASP.NET Core 2.1 Preview 1:EF Core 2. ...

  10. JavaScript之中级教程关键

    Date() setTime()getTime()toUpperCase() toLowerCase() charAt() 返回指定的字符,返回的字符长度为1的字符串. indexOf('需要检索的字 ...