Webpact学习笔记记录

这篇具有很好参考价值的文章主要介绍了Webpact学习笔记记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


声明:以下笔记内容均摘自Webpack+react全家桶开发谷粒后台项目 ~张天禹老师的讲课视频,仅供学习使用

这个项目比较旧,因此以下的的安装都加上了版本号,以免新版本不兼容影响学习,如果不加上版本号会有不一样的表现,也可能出错~。

一.初始化项目

1.生成package.json

npm init

2.安装webpack

yarn add webpack@^4.41.2 webpack-cli@^3.3.10

3.执行webpack体验

webpack ./src/js/index.js -o ./dist/js/index.js --mode development
$ webpack ./src/js/index.js -o ./dist/js/index.js --mode development
asset main.js 6.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.09 KiB
  ./src/js/index.js 446 bytes [built] [code generated]
  ./src/js/module1.js 273 bytes [built] [code generated]
  ./src/js/module2.js 109 bytes [built] [code generated]
  ./src/js/module3.js 288 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 118 ms

二、webpack的配置文件

在webpack_test下建一个webpack.config.js

/**
 * 此文件是webpack的配置文件,用于指定webpack去执行哪些任务
 */

const resolve = require('path').resolve;

module.exports = {
    // 指定入口文件
    entry: './src/js/index.js',
    // 指定输出文件
    output: {
        path: resolve(__dirname, 'dist'), // 输出文件的路径
        filename: 'js/index.js' // 输出文件的名称
    },
    // 模式
    mode: 'development' // development production 配置工作模式
};

直接执行命令webpack回车进行测试,使用配置文件进行构建

三、less-loader解析less

1.安装loader

yarn add css-loader@^3.2.0 style-loader@^1.0.1 less-loader@^5.0.0 less@^3.10.3

2.配置

    // 指定loader,loader是用于加载某些文件的
    module: {
        rules: [
            // 指定loader规则
            {
                test: /\.less$/, // 匹配所有的less文件
                use: [
                    // 指定使用哪些loader
                    'style-loader', // 用于将css代码,以style标签的形式添加到页面中
                    'css-loader', // 用于将css文件加载到js中
                    'less-loader' // 用于将less文件转为css文件
                ]
            }
        ]
    }

执行webpack测试

四、eslint-loader语法检查

对js基本语法错误进行提前检查

1.安装loader

yarn add eslint-loader@^4.0.2 eslint@^7.32.0

2.配置loader

webpack.config.js中加入以下

            // js语法检查
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules文件夹
                loader: 'eslint-loader', // 指定使用的loader
                enforce: 'pre', // 指定loader的执行顺序,pre表示优先执行
                options: { // 指定eslint-loader的配置
                    // eslint options (if necessary)
                }
            }

3.在package.json中加入

  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "node": true
    },
    "globals": {
      "$": "readonly"
    },
    "rules": {
      "no-console": 0,
      "eqeqeq": 2,
      "no-alert": 2
    },
    "extends": "eslint:recommended"
  }

以上配置参考了https://blog.csdn.net/qq_41040989/article/details/128924218
“eslintConfig”: {
“parserOptions”: {
“ecmaVersion”: 6, // 支持es6
“sourceType”: “module” // 使用es6模块化
},
“env”: { // 设置环境
“browser”: true, // 支持浏览器环境: 能够使用window上的全局变量
“node”: true // 支持服务器环境: 能够使用node上global的全局变量
},
“globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了
“$”: “readonly” // $ 只读变量
},
“rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误
“no-console”: 0, // 不检查console
“eqeqeq”: 2, // 用而不用=就报错
“no-alert”: 2 // 不能使用alert
},
“extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},

最后执行webpack测试

五、js语法转换

1.安装loader

yarn add babel-loader@^8.0.6 @babel/core@^7.7.2 @babel/preset-env@^7.7.1

2.配置loader

            // js语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules文件夹
                use: {
                    loader: 'babel-loader', // 指定使用的loader
                    options: { // 指定babel-loader的配置
                        presets: ['@babel/preset-env']
                    }
                }
            }

六、js兼容性处理

1. 第一种方法:使用polyfill

#安装
yarn add @babel/polyfill@^7.7.0

使用: 在App.js或index.js中引用

import '@babel/polyfill'; // 引入babel-polyfill,用于兼容ie浏览器

缺点:体积太大。

2. 第二种方法:借助按需引入core-js

安装:

yarn add core-js@^3.4.1

配置loader

            // js语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules文件夹
                use: {
                    loader: 'babel-loader', // 指定使用的loader
                    options: { // 指定babel-loader的配置
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 按需引入需要使用polyfill
                                    corejs: { version: 3 }, // 指定core-js的版本
                                    targets: { // 指定兼容到哪个版本的浏览器
                                        chrome: '58',
                                        ie: '9',
                                    }
                                }
                            ],
                        ],
                        cacheDirectory: true // 开启babel缓存
                    }
                }
            }

七、url-loader解析样式中的图片

1.安装loader

yarn add file-loader@^4.2.0 url-loader@^2.2.0

2.配置loader

            // 处理图片, url-loader,可以将图片转为base64处理
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader', // 指定使用的loader
                        options: {
                            limit: 1024 * 10, // 8 * 1024 = 8kb 以下的图片会被base64处理
                            outputPath: 'images', // 指定输出的目录
                            publicPath: '../dist/images', // 指定图片的公共路径
                            name: '[hash:5].[ext]' // 指定输出的文件名
                        }
                    }
                ]
            }

八、打包html文件

html不再主动引入js了,由webpack自动打包引入
如需要将以下的<script src="../dist/js/index.js"></script>取消引入,然后由插件打包进去

<head>
    <meta charset="UTF-8">
    <title>Webpack_test</title>
    <script src="../dist/js/index.js"></script>
</head>

1.安装插件

yarn add html-webpack-plugin@^4.5.0

2.配置插件

	const HtmlWebpackPlugin = require('html-webpack-plugin');

    // 配置插件
    plugins: [
        // 用于将指定的html文件,移动到输出目录,并且自动引入打包后的js文件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 指定要移动的html文件
        })
    ]

九、打包html中图片资源

url-loader和file-loader只能处理js中的图片资源,要处理件中的图片资源,需要使用html-loader。

1.安装loader

yarn add html-loader@^0.5.5

2.配置loader

            // 处理html中的图片
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader', // 指定使用的loader
                        options: {
                            esModule: false // 指定html-loader不使用es6模块化解析
                        }
                    }
                ]
            }

3.执行webpack命令即可

十、打包其他资源

1.使用file-loader处理即可,file-loader前面已经下载过

            // 使用file-loader处理字体文件和其他文件
            {
                test: /\.(eot|svg|ttf|woff|woff2|mp3|mp3|avi)$/,
                loader: 'file-loader', // 指定使用的loader
                options: {
                    outputPath: 'media', // 指定输出的目录
                    name: '[hash:5].[ext]' // 指定输出的文件名
                }
            }

十一、自动编译打包运行

1.安装loader

yarn add webpack-dev-server@^3.9.0

2.修改webpack配置

    // 配置开发服务器
    devServer: {
        compress: true, // 启动gzip压缩
        port: 3000, // 指定端口号
        open: true, // 自动打开浏览器
    }

3.package.json中修改如下

  "scripts": {
    "start": "webpack-dev-server",
  },

十一、开启热模替换

hot: true,package.json中增加此配置

    devServer: {
        compress: true, // 启动gzip压缩
        port: 3000, // 指定端口号
        open: true, // 自动打开浏览器
        hot: true, // 开启热更新
    }

入口配置修改如下

entry: ['./src/js/index.js', './src/index.html'],

十二、devtool映射技术

在webpack.config.js中加入以下配置即可

    devtool: 'cheap-module-eval-source-map' // 开发环境下使用
    // devtool: 'cheap-module-source-map' // 生产环境下使用

十三、清除打包文件目录

通过插件自动删除上一次的打包文件

1.安装插件

yarn add clean-webpack-plugin@^3.0.0

2.配置与引用插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    // 配置插件
    plugins: [
        // 用于清除指定目录的文件
        new CleanWebpackPlugin()
    ],

十四、提取css成单独的文件

1.安装插件

yarn add mini-css-extract-plugin@^0.8.0

2.引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于将css代码提取为单独的文件

3.配置loader

{
                test: /\.less$/, // 指定匹配的文件
                // 指定使用的loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 用于将css文件加载到js中
                    'less-loader' // 用于将less文件转为css文件
                ]
            }

十五、css文件的兼容性处理

1.安装

yarn add postcss-loader@^3.0.0 postcss-flexbugs-fixes@^4.1.0 postcss-preset-env@^6.7.0 postcss-normalize@^8.0.1

2.配置

{
                        loader: 'postcss-loader', // 用于给css代码自动添加兼容性前缀
                        options: {
                            postcssOptions: {
                                plugins: () => [
                                    require('postcss-flexbugs-fixs'),
                                    require('postcss-preset-env')({
                                        autoprefixer: {
                                            flexbox: 'no-2009'
                                        },
                                        stage: 3
                                    })
                                ],
                                sourceMap: true
                            }
                        }
                    },

在src目录下增加.browserslistrc文件:

# Browsers that we support

last 1 version
> 1%
IE 10 # sorry

十六、压缩css

1.安装插件

yarn add optimize-css-assets-webpack-plugin@^5.0.3

2.引入插件

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 用于压缩css代码

3.配置插件

// 用于压缩css代码
        new optimizeCssAssetsWebpackPlugin(
            {
                cssProcessorPluginOptions: {
                    presets: ['default', { discardComments: { removeAll: true } }]
                },
                cssProcessorOptions: {
                    map: {
                        inline: false, // 不生成内联映射,这样配置就会生成一个source-map文件
                        annotation: true // 如果没有源映射,就会生成一个注释
                    }
                }
            }
        )

十七、压缩html

在插件HtmlWebpackPlugin中加入以下配置即可文章来源地址https://www.toymoban.com/news/detail-653039.html

new HtmlWebpackPlugin({
            template: './src/index.html', // 指定要移动的html文件
            minify: { // 配置html压缩
                removeComments: true, // 移除注释
                collapseWhitespace: true, // 移除空格
                removeRedundantAttributes: true, // 移除多余的属性
                useShortDoctype: true, // 使用短的文档声明
                removeEmptyAttributes: true, // 移除空的属性
                removeStyleLinkTypeAttributes: true, // 移除style和link标签的type属性
                keepClosingSlash: true, // 保留闭合斜线
                minifyJS: true, // 压缩内联js代码
                minifyCSS: true, // 压缩内联css代码
                minifyURLs: true, // 压缩内联的url
            }
        })

十八、完整的package.json依赖如下

  "dependencies": {
    "@babel/core": "7.7.2",
    "@babel/polyfill": "7.7.0",
    "@babel/preset-env": "7.7.1",
    "babel-loader": "8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "3.4.1",
    "css-loader": "3.2.0",
    "eslint": "7.32.0",
    "eslint-loader": "4.0.2",
    "file-loader": "4.2.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "4.5.0",
    "less": "3.10.3",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-normalize": "^8.0.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "1.0.1",
    "url-loader": "2.2.0",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.9.0"
  }

到了这里,关于Webpact学习笔记记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)

    都采用了组件化开发的方式,都是基于MVVM的框架有着虚拟DOM, Vue 和 Angular 都采用了响应式设计的方式,当数据发生变化时会自动更新视图。 React 和 Angular 的复杂性也使得它们更加适合于大型和复杂的项目 Vue 是一款轻量级、渐进式、灵活且易于学习的框架,适合快速构建单

    2024年02月16日
    浏览(45)
  • Vue学习笔记(黑马前端)

    Vue阶段作业地址 Vue 快速上手 Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 / 开发者工具 Vue 指令 v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 综合案例 - 小黑记事本 列表渲染 / 删除功能 / 添加功能 / 底部统计 / 清空 Vue 是什么 概念:Vue 是一个用于 构建用户界面 的 渐

    2024年04月15日
    浏览(82)
  • 前端技术Vue学习笔记--005

    作用:非父子组件之间,进行简易消息传递。 (复杂场景用----Vuex) 使用步骤: 创建一个 都能访问的事件总线 (空Vue实例)-----utils/EventBus.js A组件(接受方), 监听Bus的 $on事件 B组件(发送方), 触发Bus实例的事件 provideindect作用: 跨层级 共享数据 语法: 父组件 provi

    2024年02月12日
    浏览(38)
  • 前端技术Vue学习笔记--004

    写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。 全局样式 : 默认组件中的样式会作用到全局,任何一个组件中都会受到此样式的影响 局部样式 : 可以给组件加上 scoped 属性,可以 让样式只作用于当前组件 scoped原理: 给当前组件模版的所有元

    2024年02月12日
    浏览(32)
  • 【前端Vue】Vue学习笔记之基础内容

    Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一

    2023年04月23日
    浏览(55)
  • 前端构建工具 webpack 笔记

    1、了解 webpack   1、定义:本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 ,当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所程序时,需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用

    2024年02月08日
    浏览(35)
  • 【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

    在React项目中,通常使用Webpack作为打包工具。 webpack.config.js 和 webpack.base.config.js 两个文件在项目中的作用是不同的。 webpack.config.js 是Webpack的主要配置文件,它包含了项目的通用配置以及针对不同环境(如开发环境和生产环境)的特定配置。 这个文件包含了整个Webpack配置的

    2024年01月23日
    浏览(50)
  • 【前端】尚硅谷Webpack教程笔记

    参考视频 :尚硅谷Webpack5入门到原理 课件地址 【前端目录贴】 Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件,就可以在浏览器段运行了。 我们将 Webpa

    2024年03月10日
    浏览(30)
  • 前端(三)React踩坑记录

            作者最近新的平台项目是需要用react的,和vue区别还是比较大的,这里记录下踩坑和使用经验。         框架:antd         依赖:         不知道是react本身编译规则严苛,还是公司的pipline设定,代码里面编译的时候不允许有未使用的变量,不允许使用未导入的组

    2024年04月24日
    浏览(31)
  • Html + Jquery + Vue前端学习笔记

    输入框里的值变了,data里的查询参数也会跟着变,这就是vue的绑定 @keyup.enter.native 这个代表键盘的回车事件,一般用来做查询 clearable 代表可清空 看一下整体效果 some方法判断数组中是否包含某个值 div富文本显示,u3000代表空格 上移,下移,删除,添加 控制两个按钮切换变

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包