webpack

webpack是什么
webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。
在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

webpack五个核心概念
1.Entry
入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.Output
输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

3.Loader
Loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）

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

5.Mode
模式（Mode）指示webpack使用相应模式的配置：development和production

全部指令

npm init
npm i webpack@4.41.6 webpack-cli@3.3.11 -g    //全局安装
npm i webpack@4.41.6 webpack-cli@3.3.11 -D   //本地安装
npm i css-loader@3.4.2 style-loader@1.1.3 -D      //安装css-loader和style-loader ,打包css资源
npm i less@3.11.1 less-loader@5.0.0 -D          //安装less和less-loader插件,打包less资源
npm i html-webpack-plugin@3.2.0 -D     //安装html-webpack-plugin插件，打包html资源
npm i url-loader@3.0.0 file-loader@5.0.2 -D  //打包图片资源，css类样式引入
npm i html-loader@0.5.5 -D   //打包图片资源，行内样式引入
npm i webpack-dev-server@3.10.3 -D  //下载devserver，热更新
npm i mini-css-extract-plugin@0.9.0 -D    //提取css成单独文件
npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D     //css兼容性处理
npm i optimize-css-assets-webpack-plugin@5.0.3 -D  //压缩css

打包样式资源
npm i css-loader@3.4.2 style-loader@1.1.3 -D
npm i less@3.11.1 less-loader@5.0.0 -D

rules:[
    // 详细的loader配置
    {
        test:/\.css$/,  //匹配哪些文件
        //使用哪些loader进行处理
        // use数组中loader执行顺序：从右到左，从下到上依次执行
        use:[
            'style-loader',  //创建style标签，将js中的样式资源插入进行，添加到head中生效
            'css-loader'  //将css文件变成commonjs模块加载js中，里面内容是样式字符串
        ]
    },
    {
        test:/\.less$/,
        use:[
            'style-loader',
            'css-loader',
            //将less文件编译成css文件
            //需要下载less-loader和less
            'less-loader'   
        ]
    }
]

打包html资源
npm i html-webpack-plugin@3.2.0 -D

plugins:[
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML,自动引入打包输出的所有资源（JS/CSS）
    new HtmlWebpackPlugin({
        //复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
        template:'./src/index.html'
    })
],

打包图片资源
npm i url-loader@3.0.0 file-loader@5.0.2 -D
npm i html-loader@0.5.5 -D

{
    // 处理图片资源  webpack4有效，webpack5不需要配置此项
    // 问题：默认处理不了html中img图片
    test: /\.(png|jpg|gif|svg)$/,
    // 使用一个loader
    // 下载 url-loader file-loader
    loader: 'url-loader',
    options: {
        // 当图片大小小于8kb,就会被base64处理
        // base64优点：减少请求数量（减轻服务器压力）
        // base64缺点：图片体积会更大（文件请求速度更慢）
        limit: 8 * 1024,
        // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
        // 解析时会出问题：[object Module]
        // 解决：关闭url-loader的es6模块化，使用commonjs解析
        esModule: false,
        // 给图片进行重命名
        // [hash:10]取图片的hash的前10位
        // [ext]取文件原来扩展名
        name: '[hash:10].[ext]'
    }
},
{
    test: /\.html$/,
    // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
    loader: 'html-loader'
}

打包其他资源

// 打包其他资源(除了html/js/css资源以外的资源)
{
    // 排除css/js/html资源
    exclude: /\.(css|js|html)$/,
    loader: 'file-loader',
    options:{
        name:'[hash:10].[ext]'
    }
}

devServer热更新
npm i webpack-dev-server@3.10.3 -D //下载devserver
npx webpack-dev-server //启动

// 开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 7000,
    // 自动打开浏览器
    open: true
}

提取css成单独文件
npm i mini-css-extract-plugin@0.9.0 -D //提取css成单独文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin') //原来css是在js中的，此插件是提取css成单独文件
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                // 'style-loader',  //创建style标签，将样式放入
                MiniCssExtractPlugin.loader,  //取代style-loader。作用：提取js中的css成单独文件
                'css-loader'  //将css文件整合到js文件中
            ]
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
        // 对输出的css文件进行重命名
        filename: 'css/built.css'
    })
],

兼容性处理
npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D //css兼容性处理

/*
    css兼容性处理：postcss --> postcss-loader  postcss-preset-env
    帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
    "browserslist": {
        // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
        "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
        ],
        // 生产环境：默认是看生产环境
        "production":[
        ">0.2%",
        "not dead",
        "not op_mini all"
        ]
    }
*/
// 两种写法
// 第一种写法：使用loader的默认配置 postcss-loader 修改loader的配置
{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            // postcss的插件
            require('postcss-preset-env')()
        ]
    }
}

压缩css
npm i optimize-css-assets-webpack-plugin@5.0.3 -D //压缩css

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins: [
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
],