初步优化开发环境-辅助插件等

优化项
(1)开发调试所用的 sourcemap

(2)js 文件增加 hash 值，方便缓存

(3)配置模块热更新

1:增加 sourcemap

        开发过程中，代码出错是难免的，那么调试就很重要了，webpack 帮我们打包所有文件，省了我们很多事情，但打包后的代码，却不适合用来调试，可以通过在 webpack 中增加 devtool 配置，来向浏览器暴露我们的源码，让我们可以在源码的基础上，进行调试

在 webpack.dev.conf.js 中，增加如下配置：
// 开发工具
devtool: 'eval-source-map',

这样代码哪里错了，可以看到是在源码的哪里，而不会因为编译后报错，却找不到具体是哪里出错devtool 有很多种值可选，这里只是其中的一种，可自行百度了解~

2:加缓存机制

此前，我们的出口文件 bundle.js是一个固定的名字，如果项目上线后，用户缓存了该文件，而后期我们修改了文件，用户却已经缓存过该文件，从而无法获取最新，这时候，我们就需要通过 hash 值来确保，只要文件更新了，hash 值发生变化，文件名就会不同，用户会缓存新的文件，从而达到获取最新
那么这里就需要修改 webpack.dev.conf.js 文件的出口配置了：

// 输出文件配置项
output:{
    path:path.resolve(__dirname,"dist"),
    filename: 'js/[name].[hash].js',
    chunkFilename: 'js/[name].[chunkhash].js',
    publicPath:""
},

执行命令 npm start 查看效果，页面能正常显示，打开开发者工具，可发现，引入的 js 文件，已经不叫 bundle.js 了，而变成了 main 开头加一段 hash 值的一个文件，这个 main 是 webpack 默认的出口文件名，要想这里也可控，只需修改入口文件配置即可

// 入口文件配置项
entry:{
    app:[path.resolve(__dirname, 'src/index.js')],
},
再执行命令 npm start 查看效果，是不是已经变成了我们设置的 app 这个名字？~

3:增加模块热更新-生产环境一般不需要

      现阶段我们每次修改页面，页面都会自动整体刷新，但是现在不想刷新整个页面，而是改了哪里，就刷新哪里

需要修改 webpack.dev.conf.js 文件的 plugins 以及 devServer 的配置

// 插件配置项
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',//输出文件的名称
        template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
        title:'webpack-主页',//配置生成页面的标题
    }),
    new webpack.HotModuleReplacementPlugin()
],

// 开发服务配置项
devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    host: ip,
    overlay:true,
    hot:true,
    inline:true,
    after(){
        open(`http://${ip}:${this.port}`)
        .then(() => {
            console.log(chalk.cyan(`http://${ip}:${this.port} 已成功打开`));
        })
        .catch(err => {
            console.log(chalk.red(err));
        });
    }
}
上面我们在 plugins 配置中引用了一个插件，这个插件是依托的 webpack 所以我们需要在文件头部引入 webpack，加粗代码即为新增配置项。

const webpack = require("webpack");
接下来，我们还需要修改 src/index.js 文件，当局部模块更新时，通知该文件

import './css/reset.css';
import './scss/public.scss';
import './less/index.less';

import image from './images/favicon.png';

if (module.hot) {
    module.hot.accept();
}

var func = str => {
    document.getElementById('app').innerHTML = str;
};
func('我现在在使用 es6 新语法-箭头函数!');

document.getElementById('postcss').innerHTML = "<h1>我自动添加了浏览器前缀</h1><img src='"+ image +"'/><span class='icon iconfont icon-toPay'></span>";

增加的代码为：

if (module.hot) {
    module.hot.accept();
}
这段代码需要放在引入下面，页面代码上面~

到此模块热更新算是初步配置完成了，现在执行命令 npm start 然后修改样式，或者入口文件内编译的内容，看看浏览器，已经不会去刷新整个页面了~，而是哪里涉及到修改，就刷新哪里~
 

4：cross-env—能够跨平台的设置及使用环境变量

npm add cross-env -D

修改package.json 文件的命令：
"dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js",
"start": "webpack-dev-server --config webpack.dev.conf.js --color --progress",
"test": "cross-env NODE_ENV=production webpack --config webpack.test.conf.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.prod.conf.js"
这里测试环境的变量名也暂时设置成production，后期在整合配置文件时，会再做修改。

 

5：friendly-errors-webpack-plugin node-notifier

终端在运行webpack命令时会输出很多信息，让人看着不太舒服~ 那就需要使用这个插件来解决这个问题：

（1）npm add friendly-errors-webpack-plugin node-notifier -D

（2）修改webpack.dev.conf.js配置文件:

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');

（3）plugins下新增配置项：
// 友好的终端错误显示方式
new FriendlyErrorsPlugin({
    // 运行成功
    compilationSuccessInfo:{
        message:[`你的应用程序在这里运行：http://${ip}:${this.port}`],
        // notes:['有些附加说明要在成功编辑时显示']
    },
    //  运行错误
    onErrors:function(severity,errors){
        // 可以收听插件转换和优先级的错误
        // 严重性可以是'错误'或'警告'
        if (severity !== 'error') {
            return;
          }
          const error = errors[0];
          notifier.notify({
            title: "Webpack error",
            message: severity + ': ' + error.name,
            subtitle: error.file || '',
            // icon: ICON
          });
    },
    //是否每次编译之间清除控制台
    //默认为true
    clearConsole:true,
}),

 

6：webpack-bundle-analyzer—可视化视图查看器

      可视化视图查看器，可以清楚的看到webpack打包后所有组件与组件的依赖关系，以及打包压缩后各文件的大小，还支持缩小捆绑，以及支持查看gzip的大小。

（1）npm add webpack-bundle-analyzer -D

（2）修改webpack.dev.conf.js配置文件:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

（3）plugins下新增配置项：

该插件具体参数如下：
new BundleAnalyzerPlugin({
  //  可以是`server`，`static`或`disabled`。
  //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
  //  在“静态”模式下，会生成带有报告的单个HTML文件。
  //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
  analyzerMode: 'server',
  //  将在“服务器”模式下使用的主机启动HTTP服务器。
  analyzerHost: '127.0.0.1',
  //  将在“服务器”模式下使用的端口启动HTTP服务器。
  analyzerPort: 8888, 
  //  路径捆绑，将在`static`模式下生成的报告文件。
  //  相对于捆绑输出目录。
  reportFilename: 'report.html',
  //  模块大小默认显示在报告中。
  //  应该是`stat`，`parsed`或者`gzip`中的一个。
  //  有关更多信息，请参见“定义”一节。
  defaultSizes: 'parsed',
  //  在默认浏览器中自动打开报告
  openAnalyzer: true,
  //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
  generateStatsFile: false, 
  //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
  //  相对于捆绑输出目录。
  statsFilename: 'stats.json',
  //  stats.toJson（）方法的选项。
  //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
  //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null,
  logLevel: 'info' 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})

        该插件在任何环境都可以用，这里主要看打包成生产环境后，知道各文件的依赖关系，以及文件大小，所以暂时只修改webpack.prod.conf.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 在 plugin 中添加以下代码：
new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    //  是否在默认浏览器中自动打开报告
    openAnalyzer: false,
    //  将在“服务器”模式下使用的端口启动HTTP服务器。
    analyzerPort: 9528, 
    reportFilename: 'static/report.html',
})
这里我选择了静态模式下，将生成的报告文件输出到static文件夹下，在执行过npm build后，可以打开dist文件夹看到生成的该文件，直接打开就可以看本项目的各文件的大小了；

当然，也可以选择服务器模式，将static改为server即可，再次执行yarn build，这时要想看，需要开启本地服务支持(iis或者其他)，使用这里设置的端口号就可以看到了

测试环境webpack.test.conf.js也可以添加该插件配置。