webpack(五)-noParse-IgnorePlugin-

20 webpack优化 noParse exclude webpack.IgnorePlugin

1. 当需要引入第三方的包（jquery）,打包时候会解析jquery是否依赖，jquery独立的模块不需要去解析

module : {
     noParse: /jquery/,//优化1   不去解析jquery中的依赖库
}

2. 当解析js文件时，我们可以控制解析的目录

 module: {
        noParse: /jquery/,//优化1   不去解析jquery中的依赖库
        rules: [
            {
                test:/\.js$/,
                exclude:/node_modules/,//优化2  排除匹配的目录
                include: path.resolve("src"),//  包含匹配的目录
                use: {
                    loader: "babel-loader",
                    options: {
                        presets:[
                            "@babel/preset-env"
                        ]
                    }
                }
            }
        ]
    }

3. 场景： 当我们使用moment,是一个时间工具包，内部里面把所有的语言包都引入；我们可以控制解析改包时，可以忽略调引入的文件。

  plugins: [
        //weback自带的插件 忽略
        new webpack.IgnorePlugin(/\.\/locale/,/moment/),//优化3   如果引入这个moment包时 会忽略调 locale文件
        new HtmlWebpackPlugin({
            template:"./public/index.html",

        })
    ],

    //我们要手动引入需要的语言包
    //手动引入中文包
// import "moment/locale/zh-cn";

22 ddlPlugin 插件 动态引入外部链接库

当我们使用 react react-dom 时， 我们每次打包过大 都需要引入对应的 核心包；我们要单独打包
不重复打包某些不会变动的文件，加快我们的打包速度
使用webpack的DllPlugin和DllReferencePlugin插件

//webpack.react.js 配置文件 目的生成一个 清单 

let path = require("path")
let webpack = require("webpack")
module.exports = {
    mode:"development",
    entry: {
        react: ["react", "react-dom"] //需要动态引入链接库
    },
    output: {
        filename:"_dll_[name].js",//产生文件名
        path: path.resolve(__dirname,"dist"),
        library: "_dll_[name]",//将打包好的test.js 赋值给 变量
        // libraryTarget: "var"

    },
    plugins: [
        new webpack.DllPlugin({// name = library
            name:"_dll_[name]",
            path: path.resolve(__dirname,"dist","manifest.json")
        })
    ]
}

//webpack.config.js 配置主文件 查找 动态链接接库 引用
 new webpack.DllReferencePlugin({ //查找 动态链接库
    manifest: path.resolve(__dirname, "dist", "manifest.json")
}),

//在模板提前把 清单引入
 <div id="root">
        html模板
</div>
<script src="/_dll_react.js"></script>

24 webpack自带优化

1. import 在生产环境下 会自动去掉没用的代码，就是没有执行的代码
   tree-shaking 把没用的叶子摇晃的掉

2. require模块 会把 返回的结果放在default
   不支持 tree-shaking

3. scope hosting 作用域提升 生产环境