vue学习笔记(1)--webpack学习

最近由于项目用到了vue，之前一直久闻大名，但是知之甚少，趁此机会学习一下vue。
学习vue之前，首先学习了前段打包工具--webpack，目前非常优秀和使用广泛的打包工具。参照webpack官方教程进行学习，不过官方教程目前是基于webpack3的，而实际使用的是webpack4，目前有一些比较大的差异，也做了些总结，在这里做一个简单的记录，方便以后回顾学习。

一 webpack概念

webpack是一种静态编译工具(预编译)[static module bundle]，区别于seaJs和requireJS(在线编译)，类似于javac和jit的区别
webpack中的几个概念

• Entry

入口文件，webpack编译的入口，webpack查找所有依赖的root，最终会将所有的依赖进行关联

• output

编辑结果（bundles）输出位置，以及输出结果如何命名等

• loader

webpack用于处理各种文件，loader可以处理使用import引入的所有文件（理论上）。loader需要配置在module.rules中，它有两个必填属性：test(处理哪些文件)和use(使用哪个loader)，如果配置错误，webpack会报错

• plugin

plugin用于处理各种任务，它的范围和作用比loader大，使用时需要使用require()引入，并将其加入到plugins中。若因不同目的多次使用插件需要使用new来初始化插件

二 环境分离

webpack3中使用webpack.DefinePlugin插件来实现不同环境分离：development和production

new webpack.DefinePlugin({
    //许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
     // 在webpack4中mode会自动设置该信息，废弃该配置
    "process.env.NODE_ENV": JSON.stringify("development")
})

在webpack4中使用该方式已经无效，需要使用新提供的mode来指定不同的环境。
mode分为development和production，且必须设置一种，否则会报错误提示。

// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",

三 source map

在webpack4中默认使用eval，可以通过设置devtool:"inline-source-map"来更改默认设置。在production环境中建议使用"source-map"

四 代码分离

4.1 分离CSS等

使用插件extract-text-webpack-plugin来将css和js分离。官方例子：
https://doc.webpack-china.org...
具体设置如下：

// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
     rules:[
      {
        test:/\.css$/,
        use : ExtractTextPlugin.extract({
            fallback : "style-loader",
            //这样使用会出现url()解析路径错误的问题
            //use : "css-loader"
            //使用该方式解决url()路径问题
            use:[
                {
                    loader:"css-loader",
                    options:{
                        //用于解决url()路径解析错误
                        url:false,
                        minimize:true,
                        sourceMap:true
                    }
                }
                ]
            })
        },  
    ]
}
            

4.2 拆分公共模块

由于CommonChunkPlugin已被webpack4废弃，webpack4推荐使用SplitChunkPlugin来提取公共模块。由于webpack官网(https://webpack.js.org)上面该...，网上资料介绍又不是很详细，综合网上搜索结果，终于实现了公共模块的分离，但是还是有很多疑问没有解决，后面还需要在查找相关资料。
可以参考官方的例子：https://github.com/webpack/we...
具体的配置如下：
使用SplitChunkPlugin有两种方式：
一、optimization.splitChunks

optimization: {
        //提取公共模块，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin作为替代
        //主要用于多页面
        //例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
        //SplitChunksPlugin配置，其中缓存组概念目前不是很清楚
        splitChunks: {
            // 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
            chunks: "all",
            // 表示在压缩前的最小模块大小，默认为0；
            minSize: 30000,
            //表示被引用次数，默认为1
            minChunks: 1,
            //最大的按需(异步)加载次数，默认为1；
            maxAsyncRequests: 3,
            //最大的初始化加载次数，默认为1；
            maxInitialRequests: 3,
            // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置ture则使用默认值
            name: true,
            //缓存组，目前在项目中设置cacheGroup可以抽取公共模块，不设置则不会抽取
            cacheGroups: {
                //缓存组信息，名称可以自己定义
                commons: {
                    //拆分出来块的名字,默认是缓存组名称+"~" + [name].js
                    name: "test",
                    // 同上
                    chunks: "all",
                    // 同上
                    minChunks: 3,
                    // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
                    enforce: true,
                    //test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
                    test:""
                },
                //设置多个缓存规则
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    //表示缓存的优先级
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

第二种：new webpack.optimize.SplitChunksPlugin
具体配置同optimization.splitChunks

五 热替换

使用如下配置实现：
在webpack3中使用如下配置

//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径
new webpack.NamedModulesPlugin(),
// 热替换插件
new webpack.HotModuleReplacementPlugin(),

在webpack4中NamedModulesPlugin已经作为默认设置，在development模式下会自动开启，不用进行该项配置

六 tree shaking

webpack4在development模式下并不会使用Tree shaking,在production模式下才开启。可以使用uglifyjs-webpack-plugin来压缩混淆代码

七 懒加载

使用import()来引入需要的模块，这部分是在方法中调用，而不是js开头。
建议使用vue,react等框架自带的懒加载实现