webpack管理输出

作者 新城 日期 2017-10-11
webpack
webpack管理输出

entry output管理入口出口文件
src 目录下–>index.js print.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
--index
import _ from 'lodash';
import printMe from './print.js';

function component() {
    var element = document.createElement('div');
       var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

      btn.innerHTML = 'Click me and check the console!';
       btn.onclick = printMe;

           element.appendChild(btn);

    return element;
}
document.body.appendChild(component());

--->print.js
export default function printMe() {
    console.log('I get called from print.js!');
}

dist目录下

1
2
3
4
5
6
7
8
9
<html>
<head>
        <title>Output Management</title>
         <script src="./print.bundle.js"></script>
</head>
<body>
     <script src="./app.bundle.js"></script>
</body>
</html>

webpack.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

module.exports = {
    entry: {
    // -     index: './src/index.js',
         app: './src/index.js',
         print: './src/print.js'
},
output: {
    // -     filename: 'bundle.js',
             filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
}
};

小结
将两个js文件打包到dist目录下面 并且可以控制命名方式

问题
我们提前在dist中的index文件中引入两个提前预知的js文件 加入我们以后改变webpack.configzhong文件名称，会带来问题

解决
使用webpack插件HtmlwebpackPlugin

1
npm install Htmlwebpackplugin //安装插件

该插件会自动在dist目录下生成index.html文件控制js引用

后期补充该插件学习内容
清理dist文件夹

每次构建项目的时候建议清理一次dist文件夹

1
2
3
///npm install clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugin:[new CleanWebpackPlugin(['dist']),]

运行之后dist中无关的文件将会被删除

使用source map追踪错误

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

1
+ devtool: 'inline-source-map',

使用观察者模式 和 webpack-dev-server

  • 观察者模式主要负责检测代码有没有变化进一步进行编译
  • webpack-dev-server自动去刷新浏览器
观察者模式

在package.json文件的scripts中添加 “watch”: “webpack –watch”,
运行npm run watch
编辑器会持续监测有误代码更新操作 但是不会自动刷新浏览器

webpack-dev-server

安装

install --save-dev webpack-dev-server```
1
2
**使用**
在配置文件中添加

devServer: {
contentBase: path.join(__dirname, “dist”),
compress: true,
port: 9000
},

1
package.json

“start”: “webpack-der-server –open”

1
2
3
4
5
运行npm start 编译完成后自动打开浏览器并且实时监听代码有变化从而进行编译更新

#### 模块热替换
webpack内置热更新插件
webpack.config.js

const webpack = require(‘webpack’)
//入口文件

  • print: ‘./src/print.js’
    devServer:{
  • hot : true
    }
    plugins:{
    • new webpack.HotModuleReplacementPlugin()
      }
      1
      index.js
  • document.body.appendChild(component());
  • let element = component(); // 当 print.js 改变导致页面重新渲染时，重新获取渲染的元素

  • document.body.appendChild(element);

    if (module.hot) {
    module.hot.accept(‘./print.js’, function() {

    console.log('Accepting the updated printMe module!');
  • printMe();
  • document.body.removeChild(element);
  • element = component(); // 重新渲染页面后，component 更新 click 事件处理
  • document.body.appendChild(element);
    })
    }
    `

css的添加如同篇文章所示 自动检测更新页面

Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案
http://www.cnblogs.com/ihardcoder/p/5623411.html
filename: ‘[name].[hash:8].js’,
filename: ‘[name].[ chunkha:8].js’,
chunkhash