Webpack 介绍

目录

1，为什么使用webpack

2，webpack功能

4，基础概念

webpack配置文件：

---

1，为什么使用webpack

1. 端需要模块化：

   模块化的原因：模块化可以让我们可以把复杂的程序细化为小的文件; JS模块化不仅仅为了提高代码复用性。

2. 这样可以大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

2，webpack功能

webpack是一种前端资源构建工具。一个模块打包器，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，TypeScript等），并将其打包为合适的格式以供浏览器使用） ,

3，webpack 工作方式

把项目当做一个整体，通过一个给定的入口文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

4，基础概念

1. 入口(entry) webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

2. 输出(output) webpack打包后的资源输出到哪里去，以及如何命名

3. loader 让webpack能够去处理那些非js文件（webpack只能理解js）比如：css img

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

5. 模式(mode) webpack使用相应模式的配置 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

webpack配置文件：

const path = require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin')
const CleanWebpackPlugin =require('clean-webpack-plugin')
module.exports = {
    mode: "production",
    entry: './src/index.js',
    output: {
        //   输出文件名
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist'),//path需要采取绝对路径
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  'style-loader',
                  'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less
                    'less-loader'
                ]
            },
            {    
                // 问题：处理不了html中的img图片
                test: /\.(jpg|png|gif|svg|webp)$/,
                /*解析图片*/
               
                // 使用一个loader
                // url-loader比较适合用来打包图片较小的文件，url-loader打包出来的图片是base64图片
                // 而file-loader适合用来打包较大的图片，但是打包出来的图片不是base64。
                /*
                为啥说url-loader适合打包较小的图片呢？因为url-loader把图片打包后，并不会在dist文件夹中多出打包后的文件，而是在打包后的bundle.js中引入了。
                所以如果图片较大的情况下，打包进了bundle.js里面，这会造成bundle.js文件过大，
                这时页面加载bundle.js会花费很多时间。

                但解决这个问题的方法还是有的。使用url-loader的时候，配置一个limit属性，
                limit的值是一个数值，表示字节大小。如果超过某个指定的数值大小时，图片就放到dist目录下，
                像file-loader打包后那样，如果在limit值之内，就直接在bundle.js里引入。

                
                */
                // 下载：url-loader,file-loader
                use:[{
                    loader:'url-loader',
                    options:{
                    // 给图片重命名
                    // [hash:10] 取图片的hash前10位
                    // [ext]:取文件原来的扩展名
                        name:'[hash:10].[ext]',
                    // 图片大小是8kb，就会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                        limit:8*1024,
                    // 问题：因为url-loader,默认使用es6模块化进行解析，而html-loader引入图片是以commonJs。解析时会出问题
                    //      [object Module]
                    // 解决：关闭url-loader的es6模块化，使用commonJs解析
                    esModule:false,
                    // outputPath：配置图片输出的路径
                     outputPath:'imgs/'
                    }
                }],
              
            },
            // {
            //     test:'/\.(html)$/',
            //     // 处理html文件中的img图片（负责引入img,从而能把url-loader进行处理）
            //     loader:'html-loader'
            // },

        ]
    },
    plugins:[
        // 清理插件（每次打包会清理之前的文件）
        new CleanWebpackPlugin(),
        // html打包插件
        new HtmlWebpackPlugin({
            // 模板文件路径
            template:'./src/index.html',
            // html文件路径
            filename:path.resolve(__dirname,'dist/index.html')
        })
    ]
   
}