Webpack

五大部分

1. Entry：程序入口文件，webpack通过以入口文件为起点，解析所需的依赖包进行打包，一般为index.js
2. Output
3. Loader：默认webpack只能打包javascript和json文件，如果要打包css和img等静态资源文件，需要loader，loader将资源文件转为javascript代码，交给webpack打包，loader与loader之间是链式调用
4. Plugins：功能比Loader更多
5. Mode：分为development和production两个模式

   

webpack功能

1. 将ES6语法转为浏览器可以识别的语法
2. 打包js和img等资源文件
3. 在production模式，会自动压缩js文件

   

   

Webpack 常用loader

1. Style-loader：将css转为的js字符串放在创建的style标签中，并将style标签放在head标签中
2. Css-loader：将css文件转为js字符串
3. Url-loader：用于图像
4. File-loader：用于非图像
5. Html-loader: 打包html文件中的img标签
6. Postcss-loader：css兼容性，与postcss-preset-env插件配合使用
7. Thread-loader：多进程打包

   

Webpack 常用插件

1. Htmlwebpackplugin
2. Mini-css-extract-plugin：抽取单独的css文件
3. Postcss-preset-env：和postcss-loader配合，实现css的兼容
4. optimizecss：压缩css
5. Eslint-webpack-plugin：配置代码规范，注意第三方库应该不检查

   

例子

1. 一般使用单入口
2. 将其他node_modules单独打包出来
3. loader是写在module.rules数组中rule对象中的, rule对象有两个属性, 一个是 test（用正则匹配文件名）, 另一个是 use, use是一个数组, 每个数组元素是一个loader配置对象, 包括 loader 和 options 两个属性, 如果不进行配置, 可以直接写对应的loader字符串，use中调用loader的顺序是逆序的
4. 配置devServer，要使用npx webpack serve 启动

   

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

   

module.exports = {

    mode: 'development',

    // 单入口

    entry: './src/index.js',

    // 多入口

    // 一条记录对应一个bundle

    // entry: {

    //     // key 为生成文件的名字

    //     index: './src/index.js',

    //     test: './src/index.js'

    // },

    output: {

        // name 是 entry 中的 index 或者 test 

        filename: '[name]-[contenthash:10].js',

        // 输出的根目录

        path: path.resolve(__dirname, 'dist')

    },

    module: {

        // 配置rule对象

        rules: [

            {

                test: /.css$/,

                // use 中的 loader 是逆序调用的

                use: [

                    // 创建 style 标签, 将使用 js 字符串表示的 css 样式添加到 style 标签中, 并放在 head 标签中

                    'style-loader',

                    // 将 css 源代码使用 js 的字符串表示

                    'css-loader'

                ]

            },

            {

                test: /.less$/,

                use: [

                    'style-loader',

                    'css-loader',

                    'less-loader'

                ]

            },

            {

                test: /.(jpg|gif|png)$/,

                use: [

                    {

                        loader: 'url-loader',

                        options: {

                            // 如果图片小于 8 * 1024 B 则对图像进行base64编码

                            limit: 8 * 1024,

                            name: '[hash:10].[ext]'

                        }

                    }

                ]

            },

            {

                test: /.html$/,

                use: [

                    {

                        // 用于处理html中img标签

                        loader: 'html-loader'

                    }

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: './src/index.html'

        })

    ],

     

    // 命令行使用 npx webpack serve 启动 devServer

    // devServer 的打包结果不会保存到dist目录中，而是保存在内存中，所以dist中没有文件

    // 热更新, 只针对 js 代码

    devServer: {

        // 打包的目标目录

        contentBase: path.resolve(__dirname, 'dist'),

        // gzip 压缩

        compress: true,

        port: 8888,

        // HMR 功能 hot module replace

        hot: true,

        // 自动打开默认浏览器

        open: true

    },

    // 将项目使用到的 nodes_modules 中的库单独打包出来（只有大于30kb才会分割），不会重复打包chunk

    optimization: {

        splitChunks: {

            chunks: 'all'

        }

    },

    externals: {

        // key 是 npm 的报名

        // value 为 npm 的包导入用到的名字

        jquery: '$'

    }

}