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

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&amp;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. 【Windows编程】系列第二篇:Windows SDK创建基本控件

    在Win32 SDK环境下,怎么来创建常用的那些基本控件呢?我们知道如果用MFC,简单的拖放即可完成大多数控件的创建,但是我们既然是用Windows SDK API编程,当然是从根上解决这个问题,实际 ...

  2. Bootstrap &lt;基础二十八&gt;列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  3. 换个心境搞IT,在IT职场如何打拼?

    刚进入IT这行时,我也是从程序员做起.尤其是前两三个月里,那种感觉就像时时刻刻处于备战状态一样.我是一个在对自己的要求方面有洁癖的人,在没有任何经验的状态下,只有坚持苦干,把下发的每件编程任务做好,才 ...

  4. BZOJ 1051: [HAOI2006]受欢迎的牛 强连通缩点

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=1051 题解: 强连通缩点得到DAG图,将图转置一下,对入度为零的点跑dfs看看能不能访问 ...

  5. 根据 Power BI Desktop(预览版)中的报表页创建工具提示

    根据 Power BI Desktop 中创建的报表页,可创建直观丰富的报表工具提示,这些提示在你将鼠标悬停在视觉对象上时显示. 通过创建用作工具提示的报表页,使自定义工具提示包含视觉对象.图像以及在 ...

  6. 18.python关于mysql的api

    一.pymysql模块1.pymysql是Python中操作MySQL的模块2.执行sql语句(1)连接数据库: import pymysql #连接mysql数据库创建conn对象(host连接的机 ...

  7. 用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的

    简单实现 没有做兼容<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. abap form格式的异常处理

    1: form 中有异常时,需要用 raising 将异常抛出. *&------------------------------------------------------------- ...

  9. 浅谈线程runnable和callable的使用及区别

    线程使用比较广泛,但实际上一般项目很少用上线程,线程常用于优化复杂的程序执行流程,把一些与业务关系关系不大但是必须要执行的流程使用线程的方式让子线程去执行,主流程只返回跟业务有关的信息 runnabl ...

  10. SQLServer导数据到Oracle

    从SQLServer导数据到Oracle大概有以下几种方法: 使用SSMS的导出数据向导,使用Microsoft ODBC for Oracle或Oracle Provider for OLE DB连 ...