webpack 通过一个主文件 .js ，webpack把这个文件所有的依赖文件，都处理打包成js文件
webpack 可以干嘛？
1.执行打包 （把require()模块化整合成一个js文件给html引用）
2.生成source map 利于打包后调试（感觉还是不用好）
3.构建本地服务器

4.把各种文件json ES6 react babel 通过loader 打包成 普通js文件
5. css/image loader 主文件js 引入相应css文件

6.js压缩（gulp都可以完成，不过没换变量）
7.分离css 和 js 相对于 第5条
8.缓存
9.HMR 实时更新

最简webpack

1. npm install -g webpack

2. index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>main</title>

</head>

<body>

<div id="test">abcdefg</div>

<script src="bundle.js"></script>

</body>

</html>

main.js  // 自己写的js

document.getElementById('test').style.color = 'red'
document.write(require('./module'))

module.js

module.exports='abcdddd'

webpack.config.js  //新建 webpack.config.js

module.exports={

  entry:'./main.js',    // 入口文件

  output:{

    filename:'bundle.js'   // 输出文件

  }

}

cmd ：  webpack  就会生成相应文件，浏览器查看结果,最后会把 main.js以及引入的module.js  打包压缩生成一个文件 bundle.js

webpack实时刷新 webstorm设置

一些文本编辑器有“safe write”（安全写入）功能，并且默认启用。因此，保存文件后并不总是会导致 webpack 重新编译。

每个编辑器都有不同的方式来禁用这一功能，以下是一些最常见的：

Sublime Text 3 - 在用户设置（preference）中增加 "atomic_save": false。

IntelliJ - 在设置中查找 “safe write”并且禁用它。

Vim - 在设置中增加 :set backupcopy=yes。

WebStorm - 在 Preferences > Appearance & Behavior > System Settings 中取消选中 Use "safe write"

webpack1.1   详情看 “webpack包含1.1” 百度云文件

html-webpack-plugin 依赖自动写入html
webpack-dev-middleware   webpack不用编译打包直接打结果 页面存在内存，不写入硬盘
webpack-hot-middleware 页面自动刷新
1.main.js
/*

* webpack1.1

* html-webpack-plugin 复制模板html ,并自动引入打包的js ,需要安装 npm install webpack@1.13.3 --save-dev

* webpack-dev-middleware 不用打包 cmd:webpack 就可以看结果 , 修改 dev-server.js

* webpack-hot-middleware 自动实时刷新

* */

var Hello = require('./modules/hello')

document.write(Hello)

document.write('<br/>')

var obj = {name:'xiaoming',age:12}

document.write(Object.keys(obj))  // name  age 传入一个对象，返回一个数组，获得对象的key

Object.keys(obj).forEach((val,index)=>console.log(val))

//foreach 数组遍历。有三个参数分别是：数组元素，元素的索引，数组本身（如果是一个参数就是数组元素，也就是数组的值。

document.write('<br/>点击jquery')

// 引入全局jq  $

$("body").append('<button>jquery</button>')

$("button").css("color","red")

$("button").click(function () {

  alert('this is ' +$(this).html())

});

2.webpack.config.js

/*html-webpack-plugin

* 复制模板文件，并自动引入依赖，要打包 webpack 要手动访问生成的新文件

* */

var path = require('path')

var HtmlWebpackPlugin = require('html-webpack-plugin')

var webpack = require('webpack')

module.exports={

  entry:{

    app: path.resolve(__dirname,'./main.js')  // 把 main.js 最终打包成  app.js

    // app: ['webpack-hot-middleware/client?noInfo=true&reload=true',path.resolve(__dirname,'./main.js')]

    // 简单配置的自动刷新，复杂的写到  dev-server.js 和 dev-client.js

  },

  output:{

    path:path.resolve(__dirname,'./output/static'), // 输出路径

    publicPath:'/',   // 提供给 dev-server.js 调用

    filename:'[name].js'    // 跟 entry.app 对应

  },

  resolve:{

    extensions:['','.js','.vue']  // webpack1.0 需要 '' ,  模块后缀名

  },

  module:{

    loaders:[] // 模块加载器，用不到可不写

  },

  plugins:[

    new webpack.optimize.OccurrenceOrderPlugin(),  // 自动刷新

    new webpack.HotModuleReplacementPlugin(), // 自动刷新

    new webpack.NoErrorsPlugin(), // 自动刷新

    // 复制html模板，并引入 webpack打包后的 js

    new HtmlWebpackPlugin({  // 复制模板生成 test.html

      filename:'test.html',  // 生成的文件名       filename:'test.html',  // 生成的文件名

      template:path.resolve(__dirname,'./views/index.html'),  // 复制的模板文件路径

      inject:true  // true: 自动写入依赖文件[html引入打包的js ]; false: 不写入依赖，构建多页面非常有用

    }),

    new webpack.ProvidePlugin({

      $:'jquery'    // 引入全局变量 $  代表jquery  npm install jquery --save-dev

    })

  ]

}

3.dev-server.js

// 搭建 express 本地简单服务器，必须先 cmd :webpack, 最终可以访问 http://localhost:3000/views/index.html

// 引入 webpack-dev-middleware , 无需 cmd:webpack打包 就可以看结果 结果存内存，不写入硬盘

// webpack-hot-middleware 页面自动刷新     http://localhost:3000/test.html

var express = require('express');

var app = express();

var port = process.env.PORT || 3000;

/* 引入webpack 及其配置 config*/

var webpack = require('webpack')

var webpackConfig = require('./webpack.config')

/* 自动刷新1*/

var devClient = './dev-client';

Object.keys(webpackConfig.entry).forEach(function (name, i) {

  var extras = [devClient]

  webpackConfig.entry[name] = extras.concat(webpackConfig.entry[name])

})

// 生成 compiler instance

var compiler = webpack(webpackConfig)

// 使用 webpack-dev-middleware  无需webpack打包，看结果 ，结果存在内存，不写入硬盘

var devMiddleware = require('webpack-dev-middleware')(compiler, {

  publicPath: webpackConfig.output.publicPath,  // 引入 webpackConfig配置

  stats: {

    colors: true,

    chunks: false

  }

})

// 自动刷新2

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// 监听 html文件改变事件

compiler.plugin('compilation', function (compilation) {

  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

    //发布事件reload,这个事件会在dev-client.js中接受到，然后刷新

    hotMiddleware.publish({action: 'reload'})

    cb()

  })

})

// 注册中间件

app.use(devMiddleware)

app.use(hotMiddleware)

// 使用静态资源，最终可以通过 localhost访问静态资源 test.html    http://localhost:3000/test.html

app.use(express.static(__dirname + '/'));

app.listen(port, function (err) {

  if (err) {

    throw err;

  }

  console.log('listening at http://localhost:' + port + '\n')

})

4.dev-client.js

// 自动实时刷新 webpack-hot-middleware

var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

// 订阅事件，当 event.action === 'reload' 时执行页面刷新

// 还记得 dev-server.js中 派发的reload事件吧

hotClient.subscribe(function (event) {

  if(event.action==='reload')

    window.location.reload()

})

5. package.json

  "devDependencies": {

    "express": "^4.15.2",

    "html-webpack-plugin": "^2.28.0",

    "jquery": "^3.2.1",

    "webpack": "^1.13.3",

    "webpack-dev-middleware": "^1.10.1",

    "webpack-hot-middleware": "^2.17.1"

  }
												


											
webpack的更多相关文章
	

    
						
  1. js学习笔记：webpack基础入门（一）
		
    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
    
		
    2. 
						
  2. webpack之傻瓜式教程
		
    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
    
		
    3. 
						
  3. 细说前端自动化打包工具--webpack
		
    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
    
		
    4. 
						
  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
		
    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
    
		
    5. 
						
  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
		
    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
    
		
    6. 
						
  6. webpack入门教程之Hello webpack(一)
		
    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
    
		
    7. 
						
  7. webpack的使用
		
    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
    
		
    8. 
						
  8. Webpack 配置摘要
		
    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
    
		
    9. 
						
  9. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
		
    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
    
		
    10. 
						
  10. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
		
    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue  ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 第一个spring、springmvc、mybatis、freemarker项目小知识（一）
			
    1.持久层开发(Mybatis)    1.1 添加,非空字段必须给值,不是非空加判断,有值添加无值不添    1.2 删除,注意外键关系的级联删除.(事务传播行为)    1.3 更新,每个字段单独 ...
    
			
    2. 
						
  2. 批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor
			
    批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor2.1.11 之前写过一篇文章,使用redgate公司的SQL PROMPT工具,但是不太方便 SQLPRO ...
    
			
    3. 
						
  3. Android手机清除微信缓存
			
    方法一: 1.任意找一个微信好友,给他发送网址 http://debugx5.qq.com 2.自己点击这个网址跳转 3.进入后看到下面的页面,通过勾选第二张截图的Cookie和文件缓存来清除微信缓存 ...
    
			
    4. 
						
  4. 耗时两月，NHibernate系列出炉
			
    写在前面 这篇总结本来是昨天要写的,可昨天大学班长来视察工作,多喝了点,回来就倒头就睡了,也就把这篇总结的文章拖到了今天. nhibernate系列从开始着手写,到现在前后耗费大概两个月的时间,通过总 ...
    
			
    5. 
						
  5. vim 标签页 tabnew 等的操作命令
			
    对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...
    
			
    6. 
						
  6. Ajax我选择这样入门
			
    什么是AJAX? AJAX的意思就是异步的JavaScript和XML.简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言.它可以发送及接收各种格式的信息,包括JSON.XML ...
    
			
    7. 
						
  7. kafka（logstash） + elasticsearch 构建日志分析处理系统
			
    第一版:logstash + es 第二版:kafka 替换 logstash的方案
    
			
    8. 
						
  8. Kinect开发资源汇总
			
    Kinect开发资源汇总   转自: http://www.sigvc.org/bbs/forum.php?mod=viewthread&tid=254&highlight=kinec ...
    
			
    9. 
						
  9. Be careful about the upper limit of integer
			
    在面对整数时,要留心整数溢出的情况. 在探索一个数有多少个除数的程序中,原本我们只要累加自然数到大于根号N停止即可. 不过因为计算机的整数范围的限制,我们需要判断是否i*i<(i-1)*(i-1 ...
    
			
    10. 
						
  10. Android之Linearlayouy线性布局
			
    写了个小例子xml代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
    
			
    11.