Webpack的基本配置
一、优化项目结构，创建相关的文件,项目结构如下：
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的相关参数和方法
entry 是页面入口文件配置，
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的基本配置的更多相关文章
- webpack + vuejs 基本配置（一）
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- webpack 多entry 配置
// webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- webpack的简单配置
本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...
- Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack 4+ vue-loader 配置 (完善中...)
webpack 4+ vue-loader 配置 写的demo,clone下来后,npm run dev即可,(此demo并未加入router) 可能会由于版本问题,配置会有些许改动,暂时都是可用的 ...
- [转] vue&webpack多页面配置
前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...
- webpack 4.0配置2
上个博客记录了webpack 的基本配置今天主要是css-loader的介绍,包括单独提出css,压缩css.js文件 这里使用的插件npm 地址:https://www.npmjs.com/pack ...
随机推荐
- shell脚本基础 循环机构
循环结构 for循环格式一格式:for 变量 in 值1 值2 ........(值不一定是数字,可以是命令或者其他的)do 命令done [root@ceshiji ~]# vim a.sh #!/ ...
- Linux内核开发之将驱动程序添加到内核
驱动程序添加到内核 一.概述: 在Linux内核中增加程序需要完成以下三项工作: 1.将编写的源代码复制到Linux内核源代码的相应目录 2.在目录的Kconfig文件中增加新源代码对应项目的编译配置 ...
- 第5章 PCIe总线的事务层
事务层是PCIe总线层次结构的最高层,该层次将接收PCIe设备核心层的数据请求,并将其转换为PCIe总线事务,PCIe总线使用的这些总线事务在TLP头中定义.PCIe总线继承了PCI/PCI-X总线的 ...
- dm642的中断
void fifoint_isr(); extern far void vectors(); void int_init() { IRQ_resetAll(); IRQ_se ...
- PCI9054 突发模式数据传输 (burst mode data transfer )
C mode target slave , 之前看PCI9054 datasheet知道这个burst mode ,也看了时序图,但是一直缺乏一个感性的认识. 今天网上买的 USB逻辑分析仪到货了,接 ...
- 致IT同仁 — IT人士常犯的17个职场错误
记得刚参加工作时(那是97年),中国的IT刚刚兴起,那时,作为一个IT人士是一件很光荣的事,而那时的我正在做电气和电子相关的工作.99年第一次跳槽,进入了IT行业做软件开发.至今,中国的IT已经走过了 ...
- TypeError: Error #1034: 强制转换类型失败:无法将 flash.events::MouseEvent@73b7cc1 转换为 mx.events.ItemClickEvent。
1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 flash.events::MouseEvent@73b7cc1 转换为 mx.events.ItemClick ...
- Openstack_O版(otaka)部署_Horizon部署
控制节点 1. 安装软件包 yum install openstack-dashboard -y 2. 修改配置文件 vim /etc/openstack-dashboard/local_settin ...
- hdu2242 考研路茫茫——空调教室
弱联通 #include<iostream> #include<cstdio> #include<cstring> #include<map> #inc ...
- Modbus总结
1.概念 ①Coil和Register Modbus中定义的两种数据类型.Coil是位(bit)变量:Register是整型(Word,即16-bit)变量. ②Slave和Master与Server ...