webpack核心概念之entry

 Entry用来指定webpack打包的入口，下图中webpack找到入口文件后，会将该文件所有的代码和非代码依赖都梳理出来，最终遍历完依赖树后生成打包后的静态资源。

 单入口：entry是一个字符串

module.exports={

        entry:'./path/to/my/entry/file.js'

}

 多入口：entry是一个对象

module.exports={       

        entry:{

                app:'./src/app.js',

                adminApp:'./src/adminApp.js'

        }

}

 webpack核心概念之output

output用来告诉webpack如何将编译后的文件输出到磁盘

单入口配置

module.exports={

        entry:'./path/to/my/entry/file.js'，

        output:{

                filename:'bundle.js',

                path:__dirname+'/dist'

        }

}

多入口配置：通过占位符确保文件名称的唯一 

module.exports={       

        entry:{

                app:'./src/app.js',

                adminApp:'./src/adminApp.js'

        }，

        output:{

                filename:'[name].js',

                path:__dirname+'/dist'

        }

}

webpack核心概念之loaders

webpack开箱即用只支持js和json两种文件类型，通过loaders娶支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

loaders本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的loaders

名称	描述
babel-loader	转换ES6、ES7等JS新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less文件转换成css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

const path = require('path');

module.exports={
    output:{
        filename:'bundle.js'
    },
    module:{
        rules:[
            {test:/\.txt$/, use:'raw-loader'}
        ]
    }
};

test：指定匹配规则

use：指定使用的loader

webpack核心概念之plugins

插件用于bundle文件的优化，资源管理和环境变量注入，它作用于整个构建过程。

常见的plugins

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将CSS从bunlde文件里提取成一个独立的CSS文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件娶承载输出的bundle
UglifyjsWebpackPlugin	压缩JS
ZipWebpackPlugin	将打包出的资源生成一个zip包

const path = require('path');

module.exports={
    output:{
        filename:'bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'})
    ]
}

webpack核心概念之mode

mode用来指定当前的构建环境是：production、development还是none，设置mode可以使用webpack内置的函数，默认值为production。

Mode的内置函数功能

 

选项	描述
development	设置process.env.NODE_ENV的值为development，开启NamedChunksPlugin和NamedModulesPlugin。
production	设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin。
none	不开启任何优化选项。