webpack的安装与使用（二）

一，webpack
    1,打包输出管理
        index.html根据项目的推进可能需要引入多个功能模块，那么在这主程序要引入多个bundle包，所以我们需要对每个功能模块打包，并引入
    2，多个功能模块打包
        创建功能模块
            print.js, alert.js
        在webpack.config.js中修改代码：
            entry: {
               index:'./src/index.js',
               print:'./src/print.js',
               alert:'./src/alert.js'
           },
           output: {
               filename: '[name].bundle.js',
               path: path.resolve(__dirname, 'dist')
           }
        npm run build
    3,自动修改index.html 文件引入的bundle包
        安装插件：
            npm install --save-dev html-webpack-plugin
        在webpack.config.js中修改代码：
            const path = require('path');
            + const HtmlWebpackPlygin = require('html-webpack-plugin');

               + plugins:[
                    new HtmlWebpackPlygin({
                        title:'输出管理'
                    })
                ],

            npm run build
    4,自动清理dist文件夹
        将无用的bundle包删除，
        下载插件
            npm install clean-webpack-plugin --save-dev
         在webpack.config.js中修改代码：
                    const path = require('path');
                    + const CleanWebpackPlugin = require('clean-webpack-plugin');

                       + plugins:[
                            new CleanWebpackPlugin(['dist'])
                        ],

                    npm run build
    5,source map
        错误定位
        bundle包会将主文件以及依赖文件打包在一起，并且对代码进行了压缩与混淆，一旦代码出现错误，很难定位到
        js自带功能
        inline-source-map(仅用于解释说明，不要用于生产环境)
        写在这里：

              entry: {
                    app:'./src/index.js',
                    print:'./src/print.js',
                    alert:'./src/alert.js'
                },
               + devtool:'inline-source-map',
            npm run build
    6，观察者模式自动构建
        每次修改代码都需要进行npm run build 重新构建，使用 watch 可以自动构建
        "watch":"webpack --watch"

        每次都需要刷新浏览器才能出现更新
        能不能自动刷新浏览器呢？
    7，简单的本地服务器
        实现实时重载，实时打包，浏览器实时更新
        下载插件：
            npm install --save-dev webpack-dev-server
           在webpack.config.js中修改代码：
                devtool:'inline-source-map',
               + devServer:{
                    contentBase:'./dist'
                },
           在package.json中加入：
             "start":"webpack-dev-server --open"

            npm run start

            修改端口：
            devServer:{
                    contentBase:'./dist',
                    port:8888
                },