webpack基础配置及使用

webpack是什么

  • 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时,它会递归地构建一个依赖关系图 ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
  • 主要有 五个核心概念:
    • 入口entry:指示 webpack 从哪个文件开始打包。
    • 输出output:会告诉 webpack 打包完的文件输出到哪里去,以及如何命名这些文件,默认值为 ./dist:
    • 加载器loaderwebpack 只能处理 JavaScript、json等资源,其他资源需要借助loader 才能解析。
    • 插件plugins: 扩展webpack 的功能。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。
    • 模式mode:主要是两种模式
      • 开发模式:development
      • 生产模式:production

配置

  • 初始化包:npm init -y

    • 包名不能是webpack
  • 下载依赖:npm i webpack webpack-cli -D

    • npm代理设置

      # 设置http代理
      npm config set proxy http://ip:port
      npm config set https_proxy http://ip:port
      
    • npm代理设置为空

      npm config set proxy null
      npm config set https-proxy null
      
    • 更换淘宝镜像:npm config set registry https://registry.npmmirror.com

  • 从入口打包:npx webpack 入口js文件 --mode=development

    • 打包好后在dist里面

配置文件

javascript 复制代码
const path = require("path"); //nodejs核心模块,专门用来处理路径问题

module.exports = {
    //入口
    entry: "./src/main.js", //相对路径
    //输出
    output:{
        //文件的输出路径
        //__dirname nodejs的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), //绝对路径
        filename:"main.js",
    },
    //加载器
    module: {
        rules: [
            //loader的配置
        ],
    },
    //插件
    plugins: [
        //plugin的配置
    ],
    //模式
    mode: "development",
};

处理样式资源

1.处理什么资源就要先引入什么资源

2.根据官方文档去下载对应的loadernpm install --save-dev css-loader

3.把loader引用到配置中

javascript 复制代码
//加载器
    module: {
        rules: [
            //loader的配置
            {
                test:/\.css$/, //只检测.css文件
                use: [ //执行顺序,从右到左(从下到上
                    "style-loader", //将js中css通过创建style标签添加html文件中生效
                    "css-loader", //将css资源编译成common.js的模块到js中
                ],
            },
        ],
    },

4.用几个包就要下载几个包,运行通过报错知道style-loader没有下载,则npm i style-loader -D

处理Less资源

步骤类似

  • 下载对应的loadernpm install less less-loader --save-dev

  • 引入loader

    javascript 复制代码
    {
                    test: /\.less$/i,
                    //loader: 'xxx' //只能使用一个loader
                    use: [
                      // 使用多个loader
                      'style-loader',
                      'css-loader',
                      'less-loader', //将less编译成css文件
                    ],
                },

处理sass资源

  • 下载loadernpm install sass-loader sass webpack --save-dev

  • 引入loader

    javascript 复制代码
    {
                    test: /\.s[ac]ss$/i,
                    use: [
                      // 将 JS 字符串生成为 style 节点
                      'style-loader',
                      // 将 CSS 转化成 CommonJS 模块
                      'css-loader',
                      // 将 Sass 编译成 CSS
                      'sass-loader',
                    ],
                },

处理stylus资源

  • 下载loadernpm install stylus stylus-loader --save-dev

  • 引入loader

    javascript 复制代码
    {
                    test: /\.styl$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'stylus-loader', //将stylus编译成css文件
                    ],
                },

处理图片资源

处理图片资源webpack已经内置这个功能了,但想要让图片转base64进行优化,可以加入下面的loader配置

javascript 复制代码
{
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                 dataUrlCondition: {
                    //小于10kb的图片转base64
                    //优点:减少请求数量 缺点:体积会更大
                   maxSize: 10 * 1024 // 10kb
                 },
               },
            },

修改输出文件目录

希望不同的资源去不同的路径下寻找,这样更简洁明了。对应的路径可以在output下修改:

javascript 复制代码
//输出
    output:{
        //所有文件的输出路径
        //__dirname nodejs的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), //绝对路径
        //入口文件打包输出文件名
        filename:"static/js/main.js",
    },

而图片可以添加generator修改路径:

javascript 复制代码
{
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                 dataUrlCondition: {
                    //小于10kb的图片转base64
                    //优点:减少请求数量 缺点:体积会更大
                   maxSize: 10 * 1024 // 10kb
                 },
               },
               generator: {
                //输出图片名称
                //hash:10 hash值只取前10位
                filename: 'static/images/[hash:10][ext][query]',
              },
            },

自动清空上次打包的内容

output里面添加clean: true即可,原理是:在打包前,将path整个目录的内容清空,再进行打包

处理字体图标资源

处理场景有很多,这个以阿里巴巴的图标库为例。

  • 1.下载阿里巴巴素材库中的图标,以供使用。

  • 2.下载好安装包,打开demo_index.html来进行操作,以其中font-class为例。

  • 3.引入iconfont.css,并根据自己引入的位置将最上方的url设置正确

    • main.js也要importcss
  • 4.引入iconfont.ttficonfont.wofficonfont.woff2

  • 5.挑选相应图标并获取类名,应用于页面:<span class="iconfont icon-xxx"></span>

处理其他资源

有视频等其他资源就在test里面添加就可以了

javascript 复制代码
{
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: 'asset/resource', //这个就不要转换成base64
                generator: {
                    //输出图片名称
                    filename: 'static/media/[hash:10][ext][query]',
                },
            },

处理js资源

  • webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器上运行,所以希望能做一些兼容性处理。
    • 针对js兼容性处理,使用Babel来完成。
    • 针对代码格式,使用Eslint来完成。

Eslint使用

  • 检测代码的错误

  • 1.安装插件:npm install eslint-webpack-plugin --save-devnpm install eslint --save-dev

  • 2.插件与loader不一样,需要引入后才能用:const ESLintPlugin = require('eslint-webpack-plugin');

  • 3.添加plugins配置,选择检测哪些文件

    javascript 复制代码
    plugins: [
            //plugin的配置
            new ESLintPlugin({
                //检测哪些文件
                context: path.resolve(__dirname, "src"),
            }),
        ],
  • 4.配置文件.eslintrc.js(只是一些常规的

    javascript 复制代码
    module.exports = {
        // 继承 Eslint 规则
        extends: ["eslint:recommended"],
        env: {
          node: true, // 启用node中全局变量
          browser: true, // 启用浏览器中全局变量
        },
        parserOptions: {
          ecmaVersion: 6, // es6
          sourceType: "module", // es module
        },
        rules: {
          "no-var": 2, // 不能使用 var 定义变量
        },
      };
      
  • 5.若想忽略一些文件夹的检测,就创建.eslintignore,在里面写文件名即可

Babel

  • 将一些新的语法转换成旧的,以起到兼容的作用

  • 1.下载包:npm install -D babel-loader @babel/core @babel/preset-env

  • 2.导入loader

    javascript 复制代码
    {
                    test: /\.js$/,
                    exclude: /(node_modules)/, //排除node_modules中的js文件(这些文件不处理
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },

处理Html资源

  • 不需要手动引入js,通过插件自动引入

  • 1.安装包:npm install --save-dev html-webpack-plugin

  • 2.在webpack.config.js引入const HtmlWebpackPlugin = require('html-webpack-plugin');

  • 3.在plugins里添加

    javascript 复制代码
    new HtmlWebpackPlugin({
                //模板,以public/index.html文件创建新的html文件
                //新的文件特点:1、结构和原来一致 2、自动引入打包输出的资源
                template: path.resolve(__dirname, "public/index.html"),
            }),

开发服务器&自动化

  • 1.下载包:npm i webpack-dev-server -D

  • 2.在webpack.config.js引入

    javascript 复制代码
    //开发服务器
        devServer:{
            host: "localhost", //启动服务器域名
            port: "3000", //启动服务器端口号
            open: true, //是否自动打开浏览器
        },
  • 3.启动指令是:npx webpack serve

  • PS:开发服务器不会输出资源,在内存中编译打包的

生产模式准备工作

  • 生产模式是开发完成代码后,需要将代码部署上线。这个模式主要是对代码进行优化,从以下两个角度:
    • 代码运行性能
    • 代码打包速度
  • dev是开发者模式,没有输出。
    • 开发模式配置了devServer之后是不输出资源的,在内存中编译打包。
    • 命令:webpack serve --config ./config/webpack.dev.js(根据自己的路径找js
  • prod是生产模式,有输出。
    • 生产模式不需要devServer,它只需要打包输出即可。
    • 命令:webpack --config ./config/webpack.prod.js

提取css成单独文件

  • css文件目前被打包到js文件中,当js文件加载时,会创建一个style标签来生成样式,这样对于网站而言,会出现闪屏现象,用户体验不好。我们应该是单独的css文件,通过link标签加载,这样性能才会好。

  • 1.下载包:npm install --save-dev mini-css-extract-plugin

  • 2.在webpack.prod.js上方引入插件:const MiniCssExtractPlugin = require("mini-css-extract-plugin");

  • 3.把文件中'style-loader',都换成MiniCssExtractPlugin.loader,

  • 4.plugins里面添加new MiniCssExtractPlugin(),

    • 可以通过filename来设置生成的css所在的路径

      javascript 复制代码
      new MiniCssExtractPlugin({
                  filename: "static/css/main.css",
              }),

样式兼容性处理

  • 1.下载包:npm i postcss-loader postcss postcss-preset-env -D

  • 2.在css-loader都加上:

    javascript 复制代码
    {
                            loader: "postcss-loader",
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        "postcss-preset-env", //能解决大部分样式兼容性问题
                                    ],
                                },
                            },
                        },
  • 3.可以在package.json里添加要控制什么兼容条件

    javascript 复制代码
    "browserslist": [
        "last 2 version",
        "> 1%",
        "not dead"
      ]

封装样式loader函数

相同的代码可以封装成函数,简化代码。

javascript 复制代码
//用来获取处理样式的loader
function getStyleLoader(pre){
    return [
        MiniCssExtractPlugin.loader, //提取css成单独文件
        "css-loader", //将css资源编译成common.js的模块到js中
        {
            loader: "postcss-loader",
            options: {
                   postcssOptions: {
                        plugins: [
                            "postcss-preset-env", //能解决大部分样式兼容性问题
                    ],
                },
            },
        },
        pre,
    ].filter(Boolean);
}

css压缩

  • css-minimizer-webpack-plugin使用 cssnano优化和压缩css,就像 optimize-css-assets-webpack-plugin一样,但在 source mapsassets中使用查询字符串会更加准确,支持缓存和并发模式下运行。
  • 1.下载包:npm install css-minimizer-webpack-plugin --save-dev
  • 2.在webpack.prod.js上方引入插件:const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  • 3.plugins里面添加new CssMinimizerPlugin(),
相关推荐
我要洋人死30 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人41 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人42 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#