webpack学习

最新推荐文章于 2024-07-14 17:05:54 发布
最新推荐文章于 2024-07-14 17:05:54 发布
阅读量75 收藏 1
点赞数 2
文章标签： node.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangwenboy/article/details/119954965
版权

  • webpack

  • Entry入口
    Output输出
    Loader处理非js文件
    Plugins插件
    Mode

  • 引入webpack包

npm init

npm webpack_test

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

npm i webpack webpack-cli -D//本地安装

开发环境

webpack ./src/index.js -o ./built/bulit.js --mode=deveopment
./src/index.js 入口文件
打包后输出到./built.js

不能处理css,img资源，能处理js，json资源

生产环境和开发环境相比将ES6模块化编译成浏览器能认识的模块

生产环境会比开发环境多一个压缩js代码
  • devserver包
npm i webpack-dev-server	


npx webpack serve 启动指令	


const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/bulit.js',
        path:resolve(__dirname,'bulid')
    },
module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        },
        {
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        },
        {
            //处理不了html的img图片
            test:/\.jpg|png|gif$/,
            //下载url-loader  file-loder
            loader:'url-loader',
            options:{
                //图片大小小于8kb就会被base64处理
                //优点减少请求数量（减轻服务器压力）
                //缺点图片体积会更大（文件请求会更慢）
                        limit:8*1024,
                        //关闭es6使用commonjs
                        esModule:false,
                        //取文件原来扩展名
                        name:'[hash:10].[ext]',
                        outputPath:'img'
                 }
        },
        {
            //处理html的img图片
            test:/\.html$/,
            //下载url-loader  file-loder
            loader:'html-loader',
            options:{
                esModule:false
            }
        },
        {
            //打包其他资源
            exclude:/\.(css|html|js|jpg|png|gif|less|josn)/,
            loader:'file-loader',
            options:{
                name:'[hash:10].[ext]',
                outputPath:'media'
            }
        }
    ]
},

plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    })
],
//开发服务器devserver：用来自动化
//特点只会在内存中编译打包，不会有任何输出
//指令npx webpack serve
mode:'development',
devServer:{
    //项目构建后的路径
    contentBase:resolve(__dirname,'bulid'),
    //启动gzip压缩
    compress:true,
    port:3000,
    open:true
}
}

生产环境配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { loader } = require("mini-css-extract-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
poscess.env.NODE_ENV = 'production';
const { resolve } = require("path");
const commonCssLoader = [
    //提取成单独文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions:{
                ident:'postcss',
                plugins:[
                    require('postcss-preset-env')()
                ]
            }
        }
    }
]



module.exports = {
    entry: './src/js/index.js',

    output: {
        filename: 'js/bulit.js',
        path: resolve(__dirname, 'bulid')
    },
    module: {
        rules: [
            //css
            {
                test: /\.css$/,
                use: [
                    ...commonCssLoader
                ]
            },
            //less
            {
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader'

                ]
            },
            //js
            {
                test:/\.js$/,
                exclude:/node_modules/,
                //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            //js兼容性问题解决
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'entry',
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: "60",
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ],
                    //利用 @babel/plugin-transform-runtime 插件还能以沙箱垫片的方式防止污染全局， 并抽离公共的 helper function , 以节省代码的冗余
                    "plugins": ["@babel/plugin-transform-runtime"]
                }
            },
            //img
            {
                test:/\.jpg|png|gif$/,
                loader:'url-loader',
                options:{
                            limit:8*1024,
                            //关闭es6使用commonjs
                            esModule:false,
                            name:'[hash:10].[ext]'
                     }
            },
            //html
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false
                }
            },
                //打包其他资源
            {
                exclude:/\.(css|html|js|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    outputPath:'media',
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/bulit.css'
        }),
        new OptimizeCssAssetsPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        })
    ],

    mode: 'production'
}

开发环境性能优化

const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
//HMR:hot module replacement 热模块替换/模块热替换
//作用：当一个模块发生变化，只会重新打包这一个模块html不用做HMR
//解决:entry入口将html文件引入
module.exports={
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        filename:'js/bulit.js',
        path:resolve(__dirname,'bulid')
    },

    target:'web',
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                //处理不了html的img图片
                test:/\.jpg|png|gif$/,
                //下载url-loader  file-loder
                loader:'url-loader',
                options:{
                    //图片大小小于8kb就会被base64处理
                    //优点减少请求数量（减轻服务器压力）
                    //缺点图片体积会更大（文件请求会更慢）
                            limit:8*1024,
                            //关闭es6使用commonjs
                            esModule:false,
                            //取文件原来扩展名
                            name:'[hash:10].[ext]',
                            outputPath:'img'
                     }
            },
            {
                //处理html的img图片
                test:/\.html$/,
                //下载url-loader  file-loder
                loader:'html-loader',
                options:{
                    esModule:false
                }
            },
            {
                //打包其他资源
                exclude:/\.(css|html|js|jpg|png|gif|less|josn)/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:'media'
                }
            }
        ]
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    //开发服务器devserver：用来自动化
    //特点只会在内存中编译打包，不会有任何输出
    //指令npx webpack serve
    mode:'development',
    devServer:{
        //项目构建后的路径
        contentBase:resolve(__dirname,'bulid'),
        //启动gzip压缩
        compress:true,
        port:3000,
        open:true,
        //开启HMR功能
        hot:true
    }
}

生产环境优化

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
poscess.env.NODE_ENV = 'production';
const { resolve } = require("path");
const commonCssLoader = [
    //提取成单独文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions:{
                ident:'postcss',
                plugins:[
                    require('postcss-preset-env')()
                ]
            }
        }
    }
]



module.exports = {
    entry: './src/js/index.js',

    output: {
        filename: 'js/bulit.js',
        path: resolve(__dirname, 'bulid')
    },
    module: {
        rules: [
            //css
            {
                test:/\.js$/,
                exclude:/node_modules/,
                //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                //以下loader只会匹配一个
                //不能有两个配置处理同一钟类型的文件
                oneOf:[
                    {
                        test: /\.css$/,
                        use: [
                            ...commonCssLoader
                        ]
                    },
                    //less
                    {
                        test: /\.less$/,
                        use: [
                            ...commonCssLoader,
                            'less-loader'
        
                        ]
                    },
                    //js
                    
                    //js兼容性问题解决
                    {
                        test:/\.js$/,
                        exclude:/node_modules/,
                        loader:'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'entry',
                                        corejs: {
                                            version: 3
                                        },
                                        targets: {
                                            chrome: '60',
                                            firefox: "60",
                                            ie: '9',
                                            safari: '10',
                                            edge: '17'
                                        }
                                    }
                                ]
                            ],
                            //利用 @babel/plugin-transform-runtime 插件还能以沙箱垫片的方式防止污染全局， 并抽离公共的 helper function , 以节省代码的冗余
                            "plugins": ["@babel/plugin-transform-runtime"]
                        }
                    },
                    //img
                    {
                        test:/\.jpg|png|gif$/,
                        loader:'url-loader',
                        options:{
                                    limit:8*1024,
                                    //关闭es6使用commonjs
                                    esModule:false,
                                    name:'[hash:10].[ext]'
                             }
                    },
                    //html
                    {
                        test:/\.html$/,
                        loader:'html-loader',
                        options:{
                            esModule:false
                        }
                    },
                        //打包其他资源
                    {
                        exclude:/\.(css|html|js|jpg|png|gif)/,
                        loader:'file-loader',
                        options:{
                            outputPath:'media',
                            name:'[hash:10].[ext]'
                        }
                    }
                ]
            }
            
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/bulit.css'
        }),
        new OptimizeCssAssetsPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        })
    ],

    mode: 'production'
}
很可爱啊
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack学习文档一
weixin_55555471的博客
03-10 883
webpack存在的原因：浏览器只能识别原生的html和js代码，由于现在的项目越来越大，而且经常使用了框架的内容或者es6的语法，这样就会导致浏览器不能直接识别前端代码了，所以需要通过打包工具进行一个打包，才能够正确展示页面。打包工具还可以压缩文件，使项目的体积变得更小，让浏览器加载时变得更快的作用。
webpack学习从基础学起
kokunka的博客
04-23 1953
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack学习笔记
Vivien_CC的博客
01-10 1376
之后，Webpack会将所有编译完成的模块按照它们之间的依赖关系组合成一个单独的文件，这个文件就是我们所说的“bundle”，最后将bundle文件发布到网站上，完成打包处理。resolve.modules 的默认值是 ['node_modules']，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。
Webpack学习
amuist_ting的博客
10-22 516
webpack是一种打包工具 ----安装 npm install webpack webpack-cli webpack-dev-server -D ----webpack配置文件 可命名 webpack.config.js 单个总的配置文件 也可以拆分成3个配置文件，另建文件夹config，新建3个配置文件：webpack.common.js、webpack.dev.js、webpack.prod.js 其中，webpack.common.js配置文件中存放一些开发环境和生产环境公用的配置；
Webpack 学习笔记
yavlgloss的博客
03-14 875
webpack是一个用于现代 JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图
webpack学习感受
syh221837的博客
03-31 190
从刚入行的时候就一直听说webpack如何好用，对项目的帮助有多大，但是自己一直没有仔细的去了解过，平时项目中也仅仅停留在够用的阶段，最近看了几篇关于webpack学习的文章、视频，想说说自己对webpack的认识。 webpack其实有两个主要的机制，一个是loader一个是plugin，这两个机制构建了webpack强大的功能。使其成为现在前端模块化开发过程中不可获取的一项。 对于loader，它的主要功能是加载项目中各种模块，因为webpack内部默认是按照javascript规范打包模块，所以对
webpack学习之路
weixin_44475103的博客
03-16 925
webpack学习之路webpack入门npm的使用什么是webpackwebpack的几个核心开启运行脚本webpack能做什么 webpack入门 为什么要用webpack？因为编辑器无法识别less等文件类型。 通过index.js的入口将：chunk
webpack 学习文件
12-03
**Webpack 学习详解** Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。它将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS 文件、图片或任何其他资源。Webpack 将这些模块相互关联...
webpack学习资料
11-25
在深入Webpack的学习中，我们需要了解以下几个关键概念： 1. **Entry（入口）**：Webpack 构建的起点，它是你的应用的主文件，可以是单个文件或多个文件。通过配置entry属性，你可以指定多个入口点，创建多个独立的...
webpack学习code
12-27
本压缩包“webpack学习code”包含了与Webpack相关的学习材料，帮助你深入理解和掌握这一强大的构建工具。 首先，Webpack 的核心概念包括入口（Entry）、输出（Output）、模块（Module）、加载器（Loader）和插件...
nodejs、webpack学习
08-18
nodejs、webpack学习
配置 Node.js 内存限制
Caleb的博客
07-11 479
Node.js 应用程序通常需要配置堆内存的大小以优化性能和避免内存溢出问题。你可以通过命令行参数、环境变量或系统属性来设置 Node.js 的内存限制。通过以上方法，你可以在不同操作系统下有效地配置 Node.js 的内存大小，以满足你的应用程序运行需求。环境变量来设置 Node.js 的选项。来设置 Node.js 的选项，包括内存限制。在终端中启动 Node.js 应用程序时，同样可以使用。参数来设置堆内存的大小。在启动 Node.js 应用程序时，可以使用。）中，以便每次登录时自动生效。
Node.js 模块系统
wjs2024的博客
07-11 519
Node.js 的模块系统是其核心特性之一，它允许开发者将代码组织成可重用的模块。这种系统促进了代码的模块化，使得大型应用程序的构建和管理变得更加容易。本文将深入探讨 Node.js 的模块系统，包括其工作原理、如何创建和使用模块，以及模块系统的优势和局限性。
Node.js 爬虫开发实战：构建一个高效、优雅的网络数据抓取器
最新发布
艾恩小灰灰的博客
07-14 341
通过上述步骤，你已经掌握了一个基本的Node.js爬虫框架。这个框架可以根据具体需求进一步扩展，比如增加登录功能、处理动态页面（使用Puppeteer）等。记住，构建爬虫时要遵守道德规范和法律法规，尊重网站的使用条款，不要过度抓取数据导致服务器压力过大。
webpack之ts打包
weixin_42400404的博客
07-10 518
webpack之ts打包
前端部署自动上传资源文件到cdn/oss 解决路由和访问慢的问题
王森的博客
07-09 393
1，关键点一：/scrm/xxa/xxb 无论建立多少级，oss桶都是自动建立的，无需人手动先把这些目录建立了,例如上面的path对应oss的目录/scrm/xxa/xxb下面，./dist/static下的文件也会被上传到这个目录下，这个目录却不需要先行建立。webpack中引入一个oss上传插件，并且给予其初始参数，插件根据publicPath提供的域名后的path，将打包的文件一个个按照上传到path对应的目录中，并且根据from的路径指示，将./dist/static下的所有文件都按路径上传。
前端工程化：Webpack配置全攻略
zhaodash97的博客
07-11 808
简单来说，Webpack 就是一个现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时，它会在内部构建一个依赖图，映射项目所需的每个模块，并生成一个或多个 bundle。听起来很高大上？其实就是把你那一堆乱七八糟的代码文件整理打包，变成浏览器能够理解和运行的文件。就像是一个超级勤劳的保洁阿姨，把你屋里的衣服、书本、玩具都收拾得井井有条。好了，经过这一番折腾，你应该对 Webpack 的配置有了一个全面的认识。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值