【前端】Webpack相关（长期更新）

webpack----前端打包工具

将多个模块的按依赖关系打包成一个或多个静态资源。

功能：模块打包、通过loader进行文件转换、代码拆分按需加载、扩展插件。

webpack主要包括入口、输出、加载器、插件。

通过entry入口配置依赖；

通过output指定打包后输出文件命名及路径；

webpack本身只能处理js，通过loader可以处理css等其他类型文件；

通过plugins可以在打包时执行特定任务，比如代码压缩、生成html文件等；

webpack5搭建：

1、npm init // 在空文件夹初始化package.json

2、npm install webpack webpack-cil //安装webpack及webpack-cil依赖包；

3、在utils中index.js写export const的一些通用方法；

4、在main.js中将3的方法导入，import {} from './utils/index'；

5、在public中新建index.html,可通过!+Enter快捷键迅速搭建html基本框架，并修改title，在body写入id=app的div；

正式进入配webpack：

6、在webpack.config.js配置入口文件：
javascript 复制代码
const webpack = require('webpack');

module.exports = {
    //指定为开发模式，dev开发，pro生产，开发模式不会执行代码压缩和优化，生产会
    mode:'dev',                                
    entry:{ main: './src/main.js'},            //入口文件
    output:{                                   //出口文件
        path:path.resolve(__dirname, 'dist'),  //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
        filename: 'js/chunk-[contenthash].js'    
    }
}
安装开发服务器：npm install --save-dev webpack-dev-server
javascript 复制代码
//const webpack = require('webpack');

module.exports = {
//    mode:'dev',                                //指定为开发模式，dev开发，pro生产
//    entry:{ main: './src/main.js'},            //入口文件
//    output:{                                   //出口文件
//        path:path.resolve(__dirname, 'dist'),  //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
//        filename: 'js/chunk-[contenthash].js'    
//    }
    devServer: {
        contentBase:path.join(__dirname, 'dist'), 
        compress: true,
        port: 8080,    
    }
}
7、在package.json中创建一个运行webpack的构建脚本：在scripts中添加

eg: build: 'webpack'

8、在终端运行：npm run build，目录生成dist文件夹及目录下的chunk文件

要添加插件，生成html：

9、npm install html-webpack-plugin -D //安装插件

10、在webpack.config.js引入：

javascript 复制代码

//const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//    mode:'dev',                                  //指定为开发模式
//    entry:{ main: './src/main.js'},              //入口文件
//    output:{                                     //出口文件
//        path:path.resolve(__dirname, 'dist'),    //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
//        filename: 'js/chunk-[contenthash].js'    
//    },
    //可能插入多个插件，所以是数组形式
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html  //指定模板文件
            filename:'index.html',    //打包后生成名称
            inject:'body'        //js插入body
        })
    ],
}

要添加css文件，进行加载：

11、在src/style/page.css书写通用样式；

12、在main.js引入：import './style/page.css';

13、npm install css-loader style-loader // 安装loader依赖包处理css文件

14、在webpack.config.js添加：

javascript 复制代码

//const webpack = require('webpack');

//const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//    mode:'dev',                                  //指定为开发模式
//    entry:{ main: './src/main.js'},              //入口文件
//    output:{                                     //出口文件
//        path:path.resolve(__dirname, 'dist'),    //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
//        filename: 'js/chunk-[contenthash].js'    
//    }
    //可能插入多个插件，所以是数组形式
//    plugins: [
//        new HtmlWebpackPlugin({
//            template:'./public/index.html  //指定模板文件
//            filename:'index.html',    //打包后生成名称
//            inject:'body'        //js插入body
//        })
//    ],
    module: {
        rules:[
            {
                test: /\.css$/, //正则匹配css文件
                // 从后往前加载，先css-loader，再style-loader
                use: ['style-loader','css-loader']
            }
        ]
    }
}

处理图像资源：

15、在src新建images存放图片

16、在main.js中引入：

javascript 复制代码

import img from './images/img.jpg'

const image = document.createElement('img');
image.src = img;
document.body.appendChild(image);

17、npm i file-loader url-loader -D

18、在webpack.config.js添加配置：

javascript 复制代码

//const webpack = require('webpack');

//const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//    mode:'dev',                                  //指定为开发模式
//    entry:{ main: './src/main.js'},              //入口文件
//    output:{                                     //出口文件
//        path:path.resolve(__dirname, 'dist'),    //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
//        filename: 'js/chunk-[contenthash].js'    
//    }
    //可能插入多个插件，所以是数组形式
//    plugins: [
//        new HtmlWebpackPlugin({
//            template:'./public/index.html  //指定模板文件
//            filename:'index.html',    //打包后生成名称
//            inject:'body'        //js插入body
//        })
//    ],
    module: {
        rules:[
            //{
            //    test: /\.css$/, //正则匹配css文件
                // 从后往前加载，先css-loader，再style-loader
            //    use: ['style-loader','css-loader']
            //}
            {
                test:/\.(png|jpg|gif|jpeg|webp|svg|ico)$/, // 正则匹配图片文件
                type:'asset',    // 使用asset模块
                generator:{    //生成输出文件-配置输出文件名
                    filename:'img/[name].[hash:6][ext]'
                },
                parser:{    //匹配图片大小
                    dataUrlCondition:{maxSize:10*1024}  //图片大小小于10kb
                }
            }
        ]
    }
}

每次执行npm run build生成的js文件实现覆盖：

19、在webpack.config.js的output里配置：

javascript 复制代码

//const webpack = require('webpack');

//const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//    mode:'dev',                                  //指定为开发模式
//    entry:{ main: './src/main.js'},              //入口文件
    output:{                                     //出口文件
//        path:path.resolve(__dirname, 'dist'),    //__dirname,为当前文件的绝对路径
        //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下
//        filename: 'js/chunk-[contenthash].js',    
        clean:true
    }
    //可能插入多个插件，所以是数组形式
//    plugins: [
//        new HtmlWebpackPlugin({
//            template:'./public/index.html  //指定模板文件
//            filename:'index.html',    //打包后生成名称
//            inject:'body'        //js插入body
//        })
//    ],
//    module: {
//        rules:[
            //{
            //    test: /\.css$/, //正则匹配css文件
                // 从后往前加载，先css-loader，再style-loader
            //    use: ['style-loader','css-loader']
            //}
//            {
//                test:/\.(png|jpg|gif|jpeg|webp|svg|ico)$/, // 正则匹配图片文件
//                type:'asset',    // 使用asset模块
//                generator:{    //生成输出文件-配置输出文件名
//                    filename:'img/[name].[hash:6][ext]'
//                },
//                parser:{    //匹配图片大小
//                    dataUrlCondition:{maxSize:10*1024}  //图片大小小于10kb
 //               }
//            }
//        ]
//    }
}