webpack使用4-HRM热替换&SourceMap&解析es语法

webpack为开发者提供了 三种方式去实现自动监听文件的变化重新打包，用的比较多的就是-webpack-dev-server这个插件。

使用：

1.npm install -D webpack-dev-server  安装 webpack-dev-server


2.配置简易指令，package.josn》script 》 配置： “start”: "webpack-dev-server"
这里遇到的个问题， "webpack-dev-server" 这个命令是旧版本的webpack-dev-server的开启监听的命令。  执行 npm run start 会报错！百度得知，目前启动命令已经由 webpack-dev-server 改为 webpack serve，所以配置简易指令为 "start": "wepack serve " ，执行ok！

3.webpack.config.js配置
 devServer: {
        open: true, //表示默认打包后打开浏览器  默认端口为 8080
　　　　　其他配置参数：
　　　　　host:主机
　　　　　port:端口，
　　　　 hot:热模块替换
　　　　 proxy:代理

 },

 　　安装配置ok后，每次修改源文件，文本webpack都会自己自动去重新打包。

 

热模块替换HRM：　

　　webpack的模块热替换功能（Hot Module Replacement）允许在运行时更新各种模块，而无需对网页进行完全刷新。

　　比如有这么一个业务，input输入内容，点击button 追加内容为ul中的li，li的css为隔行变色，加入你添加内容为li后，去修改这个隔行变色的颜色，页面刷新，刚才新添加的li没了，隔行变色颜色确实变了。 HRM 就可以做到，既保留原来的添加的li，颜色也可以被改变！！！

使用：

webpack.config.js中配置：

1.const webpack = require('webpack')
2.devServer: {
        contentBase: './dist',
        open: true, //表示默认打包后打开浏览器
        hot: true, //开启热模块 替换
    },
3. plugins: [
        new webpack.HotModuleReplacementPlugin(), //new 一个 webpack热模块替换的实例
    ],

SourceMap：

　　sourcemap主要功能就是提供一个源代码和打包后的压缩代码之间的一个映射关系，便于代码出错后直接定位到源代码错误所在的行。帮助代码的调试。

　　使用：直接在webpack.config.js 中配置:  devtool:'' 这个选项！ 有几种模式，参考：https://www.webpackjs.com/configuration/devtool/

 

关于生产环境和开发环境：

　　官方推荐分别为这两种模式定义一个配置文件：

　　production： webpack.prod.js

　　development:webpack.dev.js

　　由于这两个配置文件中有很多耦合代码，可以使用 webpack-merge 这个插件来提取公共的配置【定义为 webpack.base.js】，后面在将 webpack.prod.js 或者webpack.dev.js 跟这个 webpack.base.js 合并为一个完整的配置文件即可。

三个config文件：

　　

base:
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

const htmlwebpackplugin = require('html-webpack-plugin')
    //引入 html-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    //最新的webpack导出的不只一个构造函数，这里使用结构语法只取需要用到的

module.exports = { //导出一个对象
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
                test: /\.vue$/, // 正则表示匹配.vue结尾的文件
                loader: 'vue-loader',
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                // loader: 'file-loader',
                loader: 'url-loader',
                options: {
                    limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
                    name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
                        //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
            },
            {
                test: /\.styl(us)?$/,
                use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new htmlwebpackplugin(),
        new CleanWebpackPlugin(),
    ],

 　　　　resolve: { //表示一些解决方案
84         alias: { //别名
85             'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
86         }
87     }

} 

59
 ===============================================================================
prod:

　　const baseConfig = require('./webpack.base.js')

　　const { merge } = require('webpack-merge')

　　const prodConfig = { //导出一个对象

    mode: 'production',

　　}

　　module.exports = merge(baseConfig, prodConfig)

=================================================================================
dev:

const baseConfig = require('./webpack.base.js')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const devConfig = { //导出一个对象
    mode: 'development',
    devtool: 'cheap-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true, //表示默认打包后打开浏览器
        hot: true, //开启热模块 替换
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],


}
module.exports = merge(baseConfig, devConfig)

 解析转换es语法：

　　借助babel-loader这个插件，官网有详细用法：https://babeljs.io/setup#installation