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

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. MS SQL 事务日志管理小结

    本文是对SQL Server事务日志的总结,文章有一些内容和知识来源于官方文档或一些技术博客,本文对引用部分的出处都有标注.   事务日志介绍 在SQL Server中,事务日志是数据库的重要组件,如 ...

  2. java中servletContextListener、httpSessionListener和servletRequestListener使用整理

    在java web应用中,listener监听器似乎是必不可少的,常常用来监听servletContext.httpSession.servletRequest等域对象的创建.销毁以及属性的变化等等, ...

  3. 1.3 PCI总线的存储器读写总线事务

    总线的基本任务是实现数据传送,将一组数据从一个设备传送到另一个设备,当然总线也可以将一个设备的数据广播到多个设备.在处理器系统中,这些数据传送都要依赖一定的规则,PCI总线并不例外. PCI总线使用单 ...

  4. 3.3.5 DMA写时发生Cache命中的优化

    在许多高性能处理器中,还提出了一些新的概念,以加速外设到存储器的DMA写过程.如Freescale的I/O Stashing和Intel的IOAT技术. 如图3?8所示,当设备进行存储器写时,如果可以 ...

  5. PCI9054 学习小结

    PCI的基本协议这里就不介绍了,因为一般的芯片协议都是集成好的,我只需要大体了解就行,不需要做芯片,我感觉就不需要太了解协议. 这里讲解是基于PLX 的9054(9052)芯片为基础的,本人只是入门, ...

  6. JUnit4测试出错（一）

    log4j:WARN No appenders could be found for logger (org.springframework.test.context.junit4.SpringJUn ...

  7. linux命令--ldconfig和ldd用法

    一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...

  8. Caused by: java.io.FileNotFoundException

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

  9. ubuntu14.04 64位 安装Tomcat

    ubuntu14.04 64位 安装Tomcat 1 下载Tomcat 在htt://www.tomcat.apache.org官网上下载apache-tomcat-7.0.57.tar.gz 2 解 ...

  10. IO网络模型

    多路处理模型MPM MPM是Apache2引入的一个概念,就是将结构模块化.把核心任务处理作为一个可插拔的模块,使其能针对不同的环境进行优化 在这个情况下,就诞生出了处理模式的概念 Prefork 实 ...