webpack
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的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- 19个必须知道的Visual Studio快捷键
项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添加 ...
- Centos6.5下docker 环境搭建
一.运行docker Linux内核版本需要在3.8以上,针对centos6.5 内核为2.6的系统需要先升级内核.不然会特别卡,退出容器. 在yum的ELRepo源中,有mainline(3.13. ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- 做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- 记录yii2-imagine几个常用方法
记录yii2-imagine几个常用方法: //压缩 Image::thumbnail('@webroot/img/test-image.jpg', 120, 120)->save(Yii::g ...
- XP安装IIS来加载aspx页面（Web调用SAP数据）
1,安装IIS 在XP中安装IIS方法很简单,安装时需要提供安装光盘来加载I386文件,可以使用虚拟光驱或光盘.在此做个简单说明(控制面板-添加/删除 Windows组件-勾选Internet信息服务 ...
- JS这些代码你都不会，你还有什么好说的！！！
都说自己工资低的,先看看这些代码你能写出来不?这些都不会,你还嫌工资?
- iOS 打开本地 其他应用程序（URL Types）
iOS 打开本地其他应用程序(URL Types) /*前言废话:Xcode是神奇的,是我所见到的编译器中最为神奇的,如:它可以同时运行两个甚至更多Project到我们模拟器上,可以同时使用一个模拟器 ...
- VSTO PowerPoint 代码删除Shape后再恢复出现无法再次获取的问题
做PowerPoint的VSTO插件项目,遇到个很奇怪的问题,当代码执行删除某些Shape时,没问题,但是操作Undo也就是恢复后,无法再次获取到之前删除的对象,这种情况只在Office2007中出现 ...
- centos7 打开mysql 3306端口并 设置外部访问
mysql安装后默认是localhost访问,如果需要外部访问可以设置一个新的账号把host改为%,意味着所有ip均可以访问 grant all privileges on *.* to 'outUs ...