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. Java中如何把一下字符串转换成map
			
    首先,你先确认你的字符串是否是json格式的,如果是json格式,那你可以使用Gson.jar或json-lib-xx-jdk.jar两个包来自动解析解析. 使用Gson更简单些,只需要导入一个包就可 ...
    
			
    2. 
						
  2. JQuery选择器JQuery 事件
			
    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro")  ...
    
			
    3. 
						
  3. JDK Collection 源码分析（3）—— Queue
			
    @(JDK)[Queue] JDK Queue Queue:队列接口,对于数据的存取,提供了两种方式,一种失败会抛出异常,另一种则返回null或者false.   抛出异常的接口:add,remove ...
    
			
    4. 
						
  4. JavaScript 实现5秒倒计时，接着跳转
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    5. 
						
  5. gradle多模块开发
			
    参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...
    
			
    6. 
						
  6. js 也来 - 【拉勾专场】抛弃简历！让代码说话！
			
    前些日子谢亮兄弟丢了一个链接在群里,我当时看了下,觉得这种装逼题目没什么意思,因为每种语言都有不同的实现方法,你怎么能说你的方法一定比其他语言的好,所以要好的思路 + 好的语言特性运用才能让代码升华. ...
    
			
    7. 
						
  7. GMOLO平板——如何安装新系统
			
    1.首先,此款平板采用intel处理器Z3735F,不支持Win7,XP,经过测试,Win8可以在此类笔记本及平板上运行,并非只能安装最新的Win10系统. 2.下载Win8 32位系统作为预备(GH ...
    
			
    8. 
						
  8. 补发：用Meal Prep+模块化饮食来减肥之实操
			
    自从上次读到仰望尾迹云 老师的模块化饮食的帖子,再了解了一些Meal Prep的内容,结合着做Meal Prep健康餐至今已经快一个半月了.整体感觉还可以,所以在这里讲一下自己的心得体会. 分为三个部 ...
    
			
    9. 
						
  9. [转载]深入理解HTTP Session
			
    深入理解HTTP Session   session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的 ...
    
			
    10. 
						
  10. 响应式web设计总结
			
    简单来说响应式是针对不同的屏幕的大小,比如电脑电脑.Pad设备上,屏幕比较宽的,就可以一行放多个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1到2个Div就差不多了.这样在移动设备上,无论 ...
    
			
    11.