从零开始学webpack（v4.0）

于 2022-05-24 12:38:28 发布
阅读量169 收藏 1
点赞数 1
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46403734/article/details/115179752
版权

1.什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph），此依赖图会映射项目所需的每个模块，并生成一个或多个bundle包！webpack本身是基于node.js开发的！

官网：https://webpack.docschina.org/

2.为啥要使用webpack？

  • 代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、ES6/7编译为ES5、虚拟DOM编译为真实的DOM等等…

  • 文件优化：压缩JS、CSS、HTML代码，压缩合并图片，图片BASE64等

  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码等

  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件

  • 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器

  • 代码校验：Eslint代码规范校验和检测、单元测试等

  • 自动发布：自动构建出线上发布代码并传输给发布系统

  • ……

扩展：模块化的发展史：

  • 单例设计模式（Singleton Pattern）

  • AMD （Asynchronous Module Definition 异步模块定义）

  • CMD （Common Module Definition 通用模块定义）

  • CommonJS（一般应用于服务器开发，例如：Node.js）

  • ES6 Module （ESM : JS官方标准模块定义方式） https://es6.ruanyifeng.com/#docs/module

  • ……

3.webpack的基础操作

安装

// 为防止全局安装webpack导致版本冲突，真实项目中以本地安装为主 
$ npm init -y
$ npm install webpack webpack-cli --save-dev
OR
$ yarn add webpack webpack-cli -D

零配置使用

/*
 * 默认会打包SRC目录中的JS文件（入口默认index.js）
 * 打包完成的目录默认是DIST/MAIN.JS
 * webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包
 */
$ npx webpack

自定义基础配置

webpack.config.js OR webpackfile.js

let path = require('path');
module.exports = {
    //=>打包模式  开发环境development  生产环境production
    mode: 'production',
    //=>入口
    entry: './src/index.js',
    //=>输出
    output: {
        //=>输出文件的文件名
        filename: 'bundle.js',
        //=>输出目录的"绝对路径"
        path: path.resolve(__dirname, 'dist')
    }
}

自定义配置文件名

  • $ npx webpack –config webpack.config.development.js

  • 可在package.json中配置可执行的脚本命令（区分开发环境）

"scripts": {
    "serve": "webpack --config webpack.config.development.js",
    "build": "webpack --config webpack.config.production.js"
},

html-webpack-plugin

https://www.webpackjs.com/plugins/html-webpack-plugin/
$ npm i html-webpack-plugin –save-dev`

let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    //=>在webpack中使用插件
    plugins: [
        new HtmlWebpackPlugin({
            //=>指定自己的模板
            template: './src/index.html',
            //=>输出的文件名
            filename: 'index.html',
            //=>给引入的文件设置HASH戳（清除缓存的），也可以在output中设置 filename: 'bundle.[hash].js' 来生成不同的文件
            hash: true,
            //=>控制是否以及以何种方式最小化输出 
            //=>https://github.com/kangax/html-minifier
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true,
                removeEmptyAttributes: true
            }
        })
    ]
}

clean-webpack-plugin

每一次打包之前，清除之前打包的内容
$ npm install clean-webpack-plugin –sav-dev

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    plugins:[
        new CleanWebpackPlugin()
    ]
};

webpack-dev-server

https://webpack.js.org/configuration/dev-server/
$ npm install webpack-dev-server –save-dev

/* webpack.config.js */
//=>配置DEV-SERVER  **内存中编译打包**
devServer: {
    //=>端口
    port: 3000,
    //=>开启GZIP压缩
    compress:true,
    //=>显示编译进度
    progress: true,
    //=>指定访问资源目录
    contentBase: path.resolve(__dirname, "dist"),
    //=>自动打开浏览器
    open: true,
    //=>开启热更新
    hot:true,
    //=>请求代理
    proxy:{
       "/":{
          target:"http://localhost:8888", 
          secure: false, //若为true则表示是https，false是http
          changeOrigin: true //把请求头当中的host值改成服务器地址
       } 
    }
}

/* package.json */
"scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack"
}

4.多入口、多出口

const htmlPlugins = ['index', 'login'].map(chunk => {
    return new HtmlWebpackPlugin({
        template: `./${chunk}.html`,
        filename: `${chunk}.html`,
        hash: true,
        chunks:[chunk,'jquery'],
        minify: {
           collapseWhitespace: true,
           removeComments: true,
           removeAttributeQuotes: true,
           removeEmptyAttributes: true
       }
   });
});

module.exports={
    entry: {
        index: "./src/index.js",
        login: "./src/login.js",
        jquery:"./src/jquery.js"
    },
    output: {
        filename: "[name].[hash].js",
        path: path.resolve(__dirname, "dist")
    },
    plugins:[
        ...htmlPlugins
    ]
};

5.webpack中的加载器loader：处理样式的

$ npm install css-loader style-loader less less-loader autoprefixer postcss-loader –save-dev

module.exports = {
    //=>配置模块加载器LOADER
    module: {
        //=>模块规则：使用加载器（默认从右向左执行，从下向上）
        rules: [{
            test: /\.(css|less)$/, //=>基于正则匹配哪些模块需要处理
            use: [
                "style-loader", //=>把CSS插入到HEAD中
                "css-loader", //=>编译解析@import/URL()这种语法
                "postcss-loader", //=>设置前缀
                {
                    loader: "less-loader",
                    options: {
                        //=>加载器额外的配置
                    }
                }
            ]
        }]
    }
}

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

package.json

// https://github.com/browserslist/browserslist
"browserslist": [
    "> 1%",
    "last 2 versions"
]

6.mini-css-extract-plugin 抽离CSS内容

https://www.npmjs.com/package/mini-css-extract-plugin
$ npm install mini-css-extract-plugin –save-dev

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        //=>使用插件
        new MiniCssExtractPlugin({
            //=>设置编译后的文件名字
            filename: 'main.[hash].css'
        })
    ],
    module: {
        rules: [{
            test: /\.(css|less)$/,
            use: [
                // "style-loader",
                //=>使用插件中的LOADER代替STYLE方式
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",
                "less-loader"
            ]
        }]
    }
}

7.设置优化项压缩CSS/JS

$ npm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin terser-webpack-plugin –save-dev

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin= require('optimize-css-assets-webpack-plugin');

module.exports = {
    //=>设置优化项
    optimization: {
        //=>设置压缩方式
        minimizer: [
            //=>压缩CSS（但是必须指定JS的压缩方式）
            new OptimizeCssAssetsWebpackPlugin(),
            //=>压缩JS
            //new UglifyjsWebpackPlugin({
                //cache: true, //=>是否使用缓存
                //parallel: true, //=>是否是并发编译
                //sourceMap: true, //=>启动源码映射（方便调试）
            //}),
            new TerserPlugin()
        ]
    }
};

8.webpack中图片的处理

$ npm install file-loader url-loader html-withimg-loader –save-dev

module.exports = {
    module: {
        //=>模块规则：使用加载器（默认从右向左执行）
        rules: [{
            test: /\.(png|jpe?g|gif)$/i,
            use: [{
                //=>把指定大小内的图片BASE64
                //=>不在指定范围的采用file-loader进行处理
                loader: 'url-loader',
                options: {
                    limit: 200 * 1024,
                    outputPath:'/images',
                    //name:'[name].[ext]'
                }
            }],
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }, {
           test:/\.(svg|eot|ttf|woff|woff2)$/i,
           use:"file-loader"
        }, {
            test: /\.html$/,
            use: ['html-withimg-loader']
        }]
    }
}

9.基于babel实现ES6的转换和ESLint语法检测

https://babeljs.io/
https://eslint.org/
$ npm install babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime –save-dev
$ npm insall @babel/runtime @babel/polyfill
$ npm install eslint eslint-loader –save-dev

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    //=>转换的语法预设（ES6->ES5）
                    presets: [
                        "@babel/preset-env"
                    ],
                    //=>基于插件处理ES6/ES7中CLASS的特殊语法
                    plugins: [
                        ["@babel/plugin-proposal-decorators", {
                            "legacy": true
                        }],
                        ["@babel/plugin-proposal-class-properties", {
                            "loose": true
                        }],
                        "@babel/plugin-transform-runtime"
                    ]
                }
            }], //=>, "eslint-loader"
            //=>设置编译时忽略的文件和指定编译目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }]
    }
}

类的装饰器

@log
class A{
    a=1;
}
function log(target){}
巨人张
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack4.0-:webpack 4.0 配置学习
04-28
webpack4.0 练习 webpack只能操作js,其他不能操作的都必须转化，webpack是基于node来使用的。 安装webpack 首先包初始化 npm init,生成package.json 安装node,版本>8 webpack 除了正常安装webpack外，还需要安装webpack-cli。 npm i webpack webpack-cli -D //npm install --save-dev的简写 初始说明 webpack打包的时候，默认会将src下的入口文件(index.js)进行打包 node 8.2以上版本以后都有1个npx npx webpack //不设置mode时，打包的代码会自动压缩 npx webpack --mode development //开发模式不自动压缩 0配置基础架构 在项目下创建一个webpack.config.js(默认，可
webpack4.0配置
01-08
webpack4.0基本配置模版，可以根据实际情况升级自己的webpack
webpack4.0学习笔记
weixin_33893473的博客
02-15 488
webpack基础 webpack基础配置 webpack打包出的文件解析 Html插件 样式处理 转化es6语法 处理js语法及校验 全局变量引入问题 图片处理 打包文件分类 webpack配置 打包多页应用 配置source-map watch的用法 webpack小插件应用 webpack跨域问题 resolve属性的配置 定义环境...
git bash命令
qq_22585755的博客
09-21 571
git clone file：复制文件 git status：查看文件状态 git diff file：查看文件内容差异 git add file：添加文件到缓存区 git commit：提交文件到本地仓库 git pull：从服务器上获取更新文件 git push origin master：提交文件到远程服务器 vim file：查看文件， 输入字母【i】启动编辑 不保
从0开始学习Webpack（一）
weixin_33690963的博客
02-17 117
第一步： 新建一个专门用于学习Webpack的文件夹 在该文件夹内执行 npm init -y 然后执行webpack安装命令 npm install -D webpack webpack-cli 新建目录结构 src 以及src下的文件如图所示 index.js： a.js： 第二步：手动配置webpack 要手动配置webpack ，需要新建一个webpack.config.js文件 c...
webpack4.0
实事求是，艰苦奋斗，小小的梦想，终将实现。
03-11 212
webpack webpack 安装 npm install webpack webpack-cli -D webpack打包 npx webpack 会去找到node_module中的webpack.cmd文件（如果当前目录下有就执行，没有就返回上一级目录找到webpack中的webpack.js）webpack.js文件会看你是否安装webpack cli，如果有就会提示你安装webpack cli。 webpack 手动配置 默认配置名字：webpack.config.js let path = re
webpack4.0打包优化策略整理小结
08-27
主要介绍了webpack4.0打包优化策略整理小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack3.0升级4.0的方法步骤
11-21
为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0发布以来，零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，如果在项目开始使用4.0而不用vue-cli的默认配置，遇到的问题或许能少...
webpack学习笔记(一)从零开始构建基础webpack项目
Yeluochen4869的博客
03-26 1409
由于webpack更新了4.0以上版本，这里描述的是v3版本 自己使用webpack有一段时间了，现在也在学习中，接触webpack之前所使用的工具只有grunt，之后遇到上了webpack，学习过程中也遇到了很多坑，网上也有不少教程，这里也就整理一下，当作学习笔记，不少地方借鉴了vue(特别是目录搭建+样式处理) 笔记目录 基础功能搭建 => 能进行简单的打包+服务器构建+ba...
Webpack - 从基础到实战 手把手带你掌握新版Webpack4.0 - 学习笔记
Xxxxxl17的博客
05-19 1882
前言 收藏从未停止，想法从未开始，咋办呢，不想了呗，还能咋办==~
webpack学习从基础学起
kokunka的博客
04-23 1942
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack4.0学习
u014196765的博客
08-13 280
wabpack 概念 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 可以从这里了解更多关于 JavaScript 模块和 webpack 模块的...
webpack4.0基本配置，超简单！
diaopa4156的博客
03-05 199
最近复习了一下webpack，使用的是4.0版本。 下图是基本目录结构，最后留有代码地址，有兴趣可以去看看。 直接上代码（依赖未完全使用）： 项目的所有依赖都可以安装，每个都有详细的注释。】 const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); //j...
Webpack4.0基础教程一：准备工作
YaoDeBiAn的博客
12-04 977
准备工作 1.初始化项目目录：npm init -y 2.建立以下的目录结构： --dist --src ----index.js --package.json（初始化后生成） 3.完成基本的webpack配置： 首先，安装基本的webpack包： npm install --save-dev webpack webpack-cli 注：webpack4对webpack内核与c...
webpack4.0学习超详细 从0到1
qq_38935512的博客
01-13 1237
什么是webpack，模块打包机，功能就是通过入口将所有得依赖关系打包成静态资源。 功能： 1.实现代码得转换（es6转es5，css转换） 2.文件优化（压缩代码体积，合并文件等） 3.代码分割（公共模块得抽离，路由懒加载） 4.模块合并（功能分类合并模块） 5.自动刷新（热更新） 6.代码校验 7.打包后自动发布 1.Webpack 安装（找一个空文件夹） 1、npm init -y（也可以不加y）后面添加 -y参数，帮助我们自动进行确认，直接生成项目 2、npm install webpack@
webpack4 学习2
webmazha的博客
04-13 308
怎么从0开始学webpack
最新发布
03-08
从开始学习webpack，可以按照以下步骤进行： 1.了解webpack的基本概念和作用，可以通过官方文档或者相关教程进行学习。 2.安装webpack，可以使用npm或者yarn进行安装。 3.创建一个webpack配置文件，配置入口文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值