webpack

我的webpack学习视频链接：https://study.163.com/course/courseMain.htm?courseId=1209745810

什么是webpack？

webpack是一种前端资源构建器，一个静态模块打包器

在webpack看来，前端的所有资源文件（js、json、css、less、img...）都会作为模块处理，他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

webpack的五个概念

• Entry: 入口指示，webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
• Output:输出指示，webpack打包后的资源bundles输出到哪里去
• Loader:（翻译官）让webpack去处理那些非JavaScript文件
• Plugins:插件 可以用于范围更广的任务
• Mode:模式 有两种模式：开发模式：development   生产模式：production

webpack使用

安装

//全局安装：
npm i webpack webpack-cli -g

//测试是否安装成功
webpack -v

webapck.config.js

webapck.config.js是webpack的配置文件

作用：指示webpack干哪些活

//resolve用来拼接绝对路径的方法
const {resolve} = require('path') //引入path模块

const HtmlWebpackPlugin = require('html-webpack-plugin');//yarn add html-webpack-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//yarn add mini-css-extract-plugin
const optimizeCssAssetsWebapckPlugin = require('optimize-css-assets-webapck-plugin')

module.exports={
    //webpack配置
    
//入口文件
entry:'./src/index.js',

//输出
output:{
    //输出的文件名
    filename:'built.js',
    //输出路径 
    //__dirname  node.js的变量，代表当前文件的目录绝对路径
    path:resolve(__dirname,'build') //输出到当前文件下的build文件下
},

//loader配置   1.yarn或者npm下载包  2.使用
module:{
    rules:[//详细loader的配置
        {//css的编译
            test:'/\.css$/',//test就是写一个正则表达式来配置相对应的文件名，例如找到.css后缀的文件
            //使用多个loader进行处理
            use:[//use数组中的执行顺序：从右到左，从下到上，依次执行

                //创建style标签，将js中的样式资源插入进行，添加到head中
                // 'style-loader',
                MiniCssExtractPlugin.loader,//这个loader将取代style-loader。作用：提取js中的css成单独文件减小js的体积
                //将css文件编程common.js模块加载js中，里面的内容样式是字符串
                'css-loader',
                

                /* 
                    css兼容性处理：postcss --> yarn add postcss-loader postcss-preset-env 
                    帮助postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
                    
                */
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>[
                            require('postcss-preset-env')()
                        ]
                    }
                }

            ]  
            
        },
        {//less的编译
            test:'/\.less$/',
            use:[
                'style-loader',
                'css-loader',
                'less-loader'//将less文件编译成css文件
            ]

        },
        {//图片的编译 -- 这种处理不能处理html中的img图片
            test:'/\.(jpg|png|gif)$/',
            //使用单个loader
            //下载 url-loader file-loader 两个包
            loader:'url-loader',
            options:{
                //图片大小小于8kb,就会被base64处理
                //优点：减少请求数量（减少服务器压力）
                limit:8*1024,
                esModule:false,//解决：关闭url-loader的es6模块化，使用commonjs解析
                //[hash:10]去图片的hash的前10位
                //[ext]取文件原来的扩展名
                name:'[hash:10].[ext]'
            },



        },
        {
            test:/\.html$/,
            //处理html文件的img图片（负责引入img,从而能被url-loader进行处理）
            loader:'html-loader'
        },
        {
            //处理其他资源
            exclude:/\.(html|js|css|less|jpg|png|gif)/,
            loader:'file-loader',
            options:{
                name:'[hash:10].[ext]'
            }
        }
    ]
},

//plugins的配置   1.yarn或者npm下载包  2.引入  3.使用
plugins:[
    //html-webpack-plugin  功能：默认会创建一个空的Html,自动引入打包输出的所有资源（js、css）
    new HtmlWebpackPlugin({//打包HTML资源
        template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
        filename:'css/built.css'
    }),
    //压缩css
    new optimizeCssAssetsWebapckPlugin()

    
],

//模式

mode:'development',//开发模式
//mode:'production',//生产模式

//开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
//需要下载包 webpack-dev-server
devServer:{
    contentBase:resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号：
    port:3000,
    //自动打开本地浏览器
    open:true
}
    
}

package.json中的browserlist配置