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

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

index.js内容为：

  1. alert('我就是webpack');

index.html内容为:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script src="bundle.js"></script>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </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的配置

  1. var webpack = require('webpack');
  2. var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  3.  
  4. module.exports = {
  5.  
  6.      //页面入口文件配置
  7.      entry: {
  8.         index: './src/index.js'
  9.      },
  10.      //入口文件输出配置
  11.      output: {
  12.  
  13.         path: __dirname,
  14.         filename: "bundle.js"
  15.       }  
  16.     }};

 

第一步、使用require 导入webpack

  1. var webpack = require('webpack');

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

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

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

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

a.js

  1. function a(){
  2.  
  3. }

b.js

  1. function a(){
  2.  
  3. }

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

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

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

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

第四步、执行编译命令

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

  1. webpack

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

  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/ 	// The module cache
  3. /******/ 	var installedModules = {};
  4.  
  5. /******/ 	// The require function
  6. /******/ 	function __webpack_require__(moduleId) {
  7.  
  8. /******/ 		// Check if module is in cache
  9. /******/ 		if(installedModules[moduleId])
  10. /******/ 			return installedModules[moduleId].exports;
  11.  
  12. /******/ 		// Create a new module (and put it into the cache)
  13. /******/ 		var module = installedModules[moduleId] = {
  14. /******/ 			exports: {},
  15. /******/ 			id: moduleId,
  16. /******/ 			loaded: false
  17. /******/ 		};
  18.  
  19. /******/ 		// Execute the module function
  20. /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  21.  
  22. /******/ 		// Flag the module as loaded
  23. /******/ 		module.loaded = true;
  24.  
  25. /******/ 		// Return the exports of the module
  26. /******/ 		return module.exports;
  27. /******/ 	}
  28.  
  29. /******/ 	// expose the modules object (__webpack_modules__)
  30. /******/ 	__webpack_require__.m = modules;
  31.  
  32. /******/ 	// expose the module cache
  33. /******/ 	__webpack_require__.c = installedModules;
  34.  
  35. /******/ 	// __webpack_public_path__
  36. /******/ 	__webpack_require__.p = "";
  37.  
  38. /******/ 	// Load entry module and return exports
  39. /******/ 	return __webpack_require__(0);
  40. /******/ })
  41. /************************************************************************/
  42. /******/ ([
  43. /* 0 */
  44. /***/ function(module, exports) {
  45.  
  46. 	alert('我就是webpack');
  47.  
  48. /***/ }
  49. /******/ ]);

第五 步、  运行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. linux 版本控制及rpm打包

    版本控制 subversion:是一个自由/开源的版本控制系统,在subversion管理下,文件和目录可以超越时空subversion允许你数据恢复到早期版本,或者是检查数据修改历史许多人将版本控制 ...

  2. CSRF与xss的区别

    CSRF:无法获取受害者的cookie,无法看到cookie:               只是利用受害者是被服务器信任的(靠验证cookie),而给服务器发送请求: xss:利用cookie只是xs ...

  3. MySQL ODBC 3.51 Driver - Access Denied

    MySQL ODBC 3.51 Driver - Access Denied   同事反馈在应用服务器上配置MySQL ODBC 3.51 Drive时,测试连接MySQL数据库时报下面错误: ERR ...

  4. NLP︱高级词向量表达（一）——GloVe（理论、相关测评结果、R&python实现、相关应用）

    有很多改进版的word2vec,但是目前还是word2vec最流行,但是Glove也有很多在提及,笔者在自己实验的时候,发现Glove也还是有很多优点以及可以深入研究对比的地方的,所以对其进行了一定的 ...

  5. GAN︱生成模型学习笔记（运行机制、NLP结合难点、应用案例、相关Paper）

    我对GAN"生成对抗网络"(Generative Adversarial Networks)的看法: 前几天在公开课听了新加坡国立大学[机器学习与视觉实验室]负责人冯佳时博士在[硬 ...

  6. Android Gradle项目Hotfix热修复技术的接入

    https://github.com/AItsuki/HotFix Issues MAC系统无法自动打包补丁,原因可能是路径分隔符问题 使用谷歌multidex分包后无法注入代码(开启multidex ...

  7. 高级DirectDraw

    使用高彩模式 上一章中说了可以用16位的色彩深度,但是16位的色彩深度的数据表示模式可以有两种:Alpha.5.5.5(or X.5.5.5) 和 5.6.5(这是16位色彩最常用的).对于使用哪种1 ...

  8. bootstrap 幻灯大图结合dedecms的autoindex

    <div class="container" id="banner"> <div id="carousel-example-gene ...

  9. jQuery提示parsererror错误解决办法

    jquery来处理ajax,用到了json.但是很诧异,jquery的ajax回调时一直调用了error函数(一直提示parsererror异常),success函数一次没执行过 $.ajax({ t ...

  10. Windows控制台下绘制简单图形

    最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...