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"
  }

posted @ 2016-11-14 16:38 gyz418 阅读(196) 评论(0) 收藏举报

刷新页面返回顶部

gyz418

webpack

公告