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

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. CSRF的本质及防御

    本质:产生的原因本质上是参数可知或可预测 防御: 1.加密参数:加密加盐,不可知,不可预测      忧虑,引入其他麻烦:一.数据分析困难                               ...

  2. hi3531 SDK 编译 uboot, 修改PHY地址, 修改 uboot 参数 .

    一,编译uboot SDK文档写得比较清楚了,写一下需要注意的地方吧. 1. 之前用SDK里和别人给的已经编译好的uboot,使用fastboot工具都刷不到板子上.最后自己用SDK里uboot源码编 ...

  3. org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  4. R语言实现对基因组SNV进行注释

    很多时候,我们需要对取出的SNV进行注释,这个时候可能会在R上进行注释,通常注释文件都含有Chr(染色体).Start(开始位点).End(结束位点).Description(描述),而我们的SNV文 ...

  5. Java 第三章 选择结构

    第三章   选择结构 if基本语法: if(条件){// 表达式 // 代码块 } eg: int a = 10; if(a > 1){ System.out.println("内容& ...

  6. [mysql] 2进制安装和简单优化

    ##################################mysql 2进制安装和简单优化################################################## ...

  7. 【BZOJ3930】选数（莫比乌斯反演，杜教筛）

    [BZOJ3930]选数(莫比乌斯反演,杜教筛) 题面 给定\(n,K,L,R\) 问从\(L-R\)中选出\(n\)个数,使得他们\(gcd=K\)的方案数 题解 这样想,既然\(gcd=K\),首 ...

  8. Hadoop 安装流程

    前言:因项目中需要数据分析,因而使用hadoop集群通过离线的方式分析数据 参考着网上的分享的文章实施整合的一篇文章,实施记录 安装流程: 1.设置各个机器建的ssh 无密码登陆 2.安装JDK 3. ...

  9. UML那些事

    什么是UML?它的全名:Unified Modeling Language,统一建模语言.最近我用到了uml,顺便重温了下这些知识.知乎上有一个讨论话题:uml还有用吗?这个讨论挺有意思的,看完后,受 ...

  10. Web开发，浏览器通讯原理及流程那点事，你应该听说下

    题外话: 最近园子里,关于.net门槛的文章风风火火,不过这类事情每过段时间就会出来一次,所以酱油都懒的打了. 当然个人也是有想法的,特别是这两天碰巧和一个三四年经验的java开发者呆在一起,对方说. ...