Entry

概念: 入口文件，根据入口文件找到依赖文件

基本用法:

单入口

module.exports = {
    entry: './path/to/my/entry/file.js'
}

多入口

module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './scr/adminApp.js'
    }
}

Output

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

基本用法:

多入口

module.exports = {
    entry: {
        app: './src/app.js',
        search: './scr/search.js'
    }，
    output: {
        filename: '[name].js',
        path: _dirname + '/dist'
    }
}

Loaders

概念: 本身是个函数，将源生不支持的类型通过loaders转换(解析)一个结果出来,并且添加到依赖图中去

常用Loaders

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

基本用法:

const path = require('path')
// test指定匹配规则
// use指定使用的loader名称
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    module:{
        rules: [
        {test:/\.txt$/, use: 'raw-loader'}
        ]
    }
    
}

Plugins

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

常见的Plugins

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

基本用法:

const path = require('path')
// test指定匹配规则
// use指定使用的loader名称
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    plugins:[
     new HtmlWebpackPlugin({template: ',/src/index.html'})
    ]
}

Mode

概念: 用来指定当前构建环境是: production、development还是none 设置mode可以使用Webpack内置的函数，默认值是production

内置函数功能:

选项	描述
`deveplopment`	设置`process.env.NODE_ENV`的值为`deveplopment`.开启`NamedChunksPlugin`和`NamedModulesPligin`.
`production`	设置`process.env.NODE_ENV`的值为`production`.开启`FlagDependencyUsagePlugin`,`FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`,`NoEmitOnErrorsPlugin`,`OccurrenceOrderPlugin`,`SideEffectsFlagPlugin`和`TerserPlugin`.
`none`	不开启任何优化选项

Webpack学习笔记（一）

Entry

Output

Loaders

Plugins

Mode