webpack优化笔记

先创建一个最简单配置的webpack.config.js. 然后一点儿一点儿添加配置。

const path=require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
    module:{
        
    },
    plugins:[
        
    ]
}

index.js编写react代码

import React from 'react';
import ReactDOM from 'react-dom'
let result='hello';
ReactDOM.render(
{result}
,document.getElementById("root"));

1. include & exclude

因为添加了react需要配置react的解析器：配置loader

module:{
        rules:[
            {
                 test:/\.jsx?$/,
                 use:[
                  {
                    loader:'babel-loader',
                    options: {
                            presets:["env","stage-0","react"]
                     }
                  }
                  ],
                 include:path.resolve(__dirname,'src'),
                 exclude:/node_modules/
            }
        ]
    }

添加include和exclude：include表示解析哪个路径下的js文件，这里是一个绝对路径。exclude：不解析那个文件中的js文件，最主要的就是node_modules这里使我们安装的各种依赖包，都是已经解析好的文件就不需要再解析了。

1. 配置js的loader时需要配置options.presets：["env","stage-0","react"]

npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

2. 第二种配置options方法是删除当前配置，新建一个与webpack.config.js平级的 .babelrc文件。文件内代码为：

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

2.resolve.modules

    resolve:{
        //当你需要指定除node_modules之外的其他模块目录的话
        modules:[path.resolve('node_modules'),path.resolve('lib')]
    },

配置resolve：如果以后项目的层级很深，很多文件需要去找一个文件夹中的文件可能会出现这种情况：../../../../../../index.js 这样无疑增加了文件查找的时间。

3. resolve.alias

配置别名

resolve:{
        alias:{
                 react:path.resolve('node_modules/react/cjs/react.production.min.js')
        }
    },

当加载react模块的时候，不需要去找main 中的 index 等等 直接找到这个地址。

4. DLL

.dll 为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据

• 把基础模块独立出来打包到单独的动态连接库里
• 当需要导入的模块在动态连接库里的时候，模块不能再次被打包，而是去动态连接库里获取 dll-plugin
  新建一个webpack配置文件，将需要单独打包的文件单独打包出来：webpack.react.config.js

const path=require('path');
const webpack=require('webpack');
module.exports={
    entry:{
        react:['react','react-dom']
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name]_dll.js',
        library:'_dll_[name]'   //指定的导出变量的名称，全局变量的名字，其他模块会从此变量获得里面的模块
    },
    plugins:[
        new webpack.DllPlugin({
            name:'_dll_[name]',
            path:path.join(__dirname,'dist','manifest.json')
        })
    ]

}
将其打包：

在webpack.config.js配置plugins：

plugins:[
        new webpack.DllReferencePlugin({
            manifest:path.join(__dirname,'dist','manifest.json')
        })
    ]

重新打包，打包时间明显减少。

5.HappyPack

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。使用计算机的cpu多核进行打包。
npm 安装

npm i happypack@next -D

const path=require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename: 'bundle.js'
    },
    module:{
        rules:[
            {
                test:/.jsx?$/,
                use:'happypack/loader?id=babel',
            },
            {
                test:/.css?$/,
                use:'happypack/loader?id=css',
            }
        ]
    },
    plugins:[
        new HappyPack({
            id:'babel',
            loaders:['babel-loader']

        }),
        new HappyPack({
            id:'css',
            loaders:['style-loader','css-loader']

        })
    ]
}

重新打包 结果凉了：打包时间反而长了。
可能是因为新建的测试项目，文件比较少，还不如使用单核。尴尬了。。