熟悉webpack

首先，了解一下webpack是什么

webpack是一中前端资源构造工具，一个静态模块打包器

 

webpack的五个核心概念

1、entry（入口），以那个文件作为起点开始打包

2、output（出口），输出知识webpack打包后的资源，bundles输出到哪去，以及命名

3、module中的loader， 让webpack能够去处理那些非JavaScript文件（让webpack自身只理解JavaScript）

4、plugin（插件），可以用于执行范围更广的任务。包括从打包优化和压缩，一直到重新定义环境中的变量

5、mode，指示相应模式配置

 

开始配置

1、初始化项目 npm init

2、下载 webpack

        npm i webpack-cli -g

        npm i webpack-cli -D

3、运行指令

        开发： webpack 入口文件的路径 -o 出口文件的路径 --mode=devlopment

        生产： webpack 入口文件的路径 -o 出口文件的路径 --mode=production

 

结论：

        1、能处理js/json，不能处理css/img等资源文件

        2、生产环境，将es6模块化编译成浏览器能识别的模块

        3、生产环境多一个压缩js代码

 

 

如何打包样式资源

1、创建webpack.config.js配置文件

        作用： 指示webpack干什么

        基于node.js平台运行模块化，默认采用common.js

 

module.export ={

        entry:  入口文件路径，

        output: {

                filename: 出口文件名字，

                path： resolve(__direname, 'build‘） 出口文件路径

        },

        // loader 的配置

        moudle： {  1、下载相关的加载器  2、使用加载器

                rules: [

                        {

                                test: /\.css$/,   匹配文件

                                use: [  // 执行顺序： 从右往左 或者 从下往上

                                           // 创建stylle标签，将js中的样式资源插入行，添加head中生效

                                        'style-loader',

                                        // 将文件cs变成commandjs模块，加载js中，里面内容是字符串

                                        'css-loader'

                                ]

                        }

                }，

            plugins: [  1、下载相关的插件  2、引入插件  3、使用插件

                new HTMLWebpackPlugin ({

                        // 复制 /src/index.html， 并且自动引入并打包输出的所有资源（js/css）

                        template: './src/index.html'

                        })

                ] 

        }

 

 

打包图片资源 （处理样式的图片资源）

        下载url-loader

        在module中使用url-loader 

        module： {

                rules：[

                        {

                                test: /\.(jpg|jpeg|gif|png)$/，

                                loaders： ‘url-loader’,

                                options: {

                                        limit: 8* 1024， // 图片大小小于8kb，被base64处理

                                                1、优点 减少请求数量，减轻服务器的压力

                                                2、缺点  图片体积会更大，文件请求速度更慢

                                        name: '[hase:10].[ext],  // 取名字

                                        es6Module： false // 默认使用es6模块化解析，false关闭es6模块化解析

                                }

                       ]

        }

 

 

处理html的图片

module： {

        rules： [

                {

                        test: /\.html$/',

                         loader: 'html-loader',  // 处理html文件img图片，使用commonjs模块化解析

                         outputPath: 'img'  // 指定打包后的图片位置

                }

        ]

}

 

打包其他资源

1、引入css文件到js文件

2、导入其他文件

3、开始打包

module： {

        rules： [

                {

                        test: /\.css$/',

                         loader:[ 'style-loader', 'css-loader'] ,

                         outputPath: 'img'  // 指定打包后的图片位置

                },

                {

                        exclude: /\(css|js|html|less)$/， // 排除文件

                        loader： ‘file-loader’，

                        options: {

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

                                }

                }

        ]

}