webpack学习路线(二) 核心概念

核心概念：

• Entry 用来指定webpack的打包入口
• Output 用来告诉webpack如何将编译后的文件输出到磁盘
• Loaders 只支持JS和JSON两种类型，通过Loaders去支持其它文件类型并把他们转换成有效的模块，并且可以添加到依赖图中。
• Plugins 插件用户bundle文件的优化，资源管理和环境变量注入。作用于整个构建过程。
• Mode 用来指定当前的构建环境是: production 、development、node。设置mode可以使用webpack内置的函数，默认为production。

Entry的用法：

单入口： entry是一个字符串

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

多入口： entry是一个对象

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

Output的用法：

单入口配置：

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
};

多入口配置：

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js', // 通过占位符确保文件名称的唯一
        path: __dirname + '/dist'
    }
};

Loaders的用法：

const path = require('path');

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

常见的Loaders：

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

 

 

 

 

 

 

 

 

 

Plugins的用法：

const path = require('path');

module.exports = {
    output: {
        filename: 'bundle.js'
    },

    plugins: [
        // 放到plugins数组里
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

常见的Plugins:

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