-

webpack使用:进行压缩合并js图文教程)

Webpack是一个模块打包工具,可以将多个模块打包成一个文件,提高项目的加载速度。支持多种模块格式,具有丰富的插件系统和配置选项。
官网地址:https://webpack.docschina.org/

webpack安装
npm init -y 生成包描述文件package.json
npm i webpack webpack-cli -D 安装webpack
npx webpack ./src/main.js --mode=development 以开发模式打包
npx webpack ./src/main.js --mode=production 以生产模式打包
有webpack.config.js文件时,可以直接使用 npx webpack 命令进行打包
webpack.config.js配置
webpack.config.js文件内容如下

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',//开发模式
}
package.json配置
package.json配置文件内容如下
运行:npm start
npm run build
{
  "name": "del20231230",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start":"npm run dev",
    "dev": "webpack server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/preset-env": "^7.23.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "eslint": "^8.56.0",
    "eslint-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^5.6.0",
    "less": "^4.2.0",
    "less-loader": "^11.1.4",
    "sass": "^1.69.6",
    "sass-loader": "^13.3.3",
    "style-loader": "^3.3.3",
    "stylus": "^0.62.0",
    "stylus-loader": "^7.1.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

案例
css-loader案例使用
css-loader 会对 @import 和 url() 进行处理,就像 js 解析 import/require() 一样。
教程网址:https://webpack.docschina.org/loaders/css-loader/
npm install --save-dev css-loader 安装
js里引用
import css from 'file.css';
        
webpack.config.js里配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
less-loader案例使用
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/less-loader/
npm install less less-loader --save-dev 安装
js里引用
import "./less/index.less";
        
webpack.config.js里配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};
sass-loader案例使用
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/sass-loader/
npm install sass sass-loader --save-dev 安装
js里引用
import "./sass/index.sass";
        
webpack.config.js里配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};
stylus-loader案例使用
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/stylus-loader/
npm install stylus stylus-loader --save-dev 安装
js里引用
import "./stylus/index.styl";
        
webpack.config.js里配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
                'style-loader', 
                'css-loader',                     
                'stylus-loader',// 将 Stylus 文件编译为 CSS
            ],
      },
    ],
  },
};
下载字体

选择需要的字体项 下载选择后的字体

插件eslint
该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。
字体网址:https://webpack.docschina.org/plugins/eslint-webpack-plugin/#root
安装:npm install eslint eslint-webpack-plugin --save-dev
webpack.config.js文件里添加
const ESLintPlugin = require('eslint-webpack-plugin');


         //插件
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, 'src'),
        })
    ],
.eslintrc.js文件内容
module.exports={
    extends: ["eslint:recommended"],
    env: {
        node: true, // 启用node中全局变量
        browser: true, // 启用浏览器中全局变量
    },
    parserOptions: { 
        ecmaVersion: 6, //es6
        sourceType: "module",  // es module
    },
    rules: {
        // 这里写你的规则
        "no-var":2, //不能使用 var 定义变量
    },
}
babel-loader案例使用
使用 Babel 和 webpack 转译 JavaScript 文件。
教程网址:https://webpack.docschina.org/loaders/babel-loader/
安装:npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js里配置
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,// 排除node_modules中的js文件(这些文件不处理)
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
  ];
}
        
HtmlWebpackPlugin案例使用
使用 Babel 和 webpack 转译 JavaScript 文件。
教程网址:https://webpack.docschina.org/plugins/html-webpack-plugin
安装:npm install --save-dev html-webpack-plugin
webpack.config.js里配置
const HtmlWebpackPlugin = require('html-webpack-plugin');

//插件
    plugins:[
        // plugin的配置 
        new HtmlWebpackPlugin()
    ],
        
DevServer
webpack-dev-server 可用于快速开发应用程序。
教程网址:https://webpack.docschina.org/configuration/dev-server/
安装:npm install --save-dev webpack-dev-server
启动:npx webpack server
开发模式: npx webpack server --config ./config/webpack.dev.js
生产模式: npx webpack --config ./config/webpack.prod.js
webpack.config.js里配置

   // 开发服务器:不会输出资源,在内存中编译打包
    devServer: {
        host:"localhost",// 启动服务器域名
        port:"3000",// 启动服务器端口号
        open: true,// 是否自动打开浏览器
      },
        
MiniCssExtractPlugin
本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
教程网址:https://webpack.docschina.org/plugins/mini-css-extract-plugin
安装:npm install --save-dev mini-css-extract-plugin
webpack.config.js里配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");


rules:[
            // loader的配置 
            {
                test: /\.css$/i,  //只检测xxx文件
                use: [
                    //执行顺序,从后往前
                     MiniCssExtractPlugin.loader, // 提取css成单独文件
                     'css-loader', // 将css资源编译成commoonjs的模块到js中 
                    ],
            } 


 //插件
    plugins:[         
        new MiniCssExtractPlugin(),
    ],
        
postcss-loader
解决CSS兼容问题
教程网址:https://webpack.docschina.org/loaders/postcss-loader
安装:npm install --save-dev postcss-loader postcss postcss-preset-env
webpack.config.js里配置

      'css-loader', 
                  {
                     loader: 'postcss-loader',
                     options: {
                       postcssOptions: {
                         plugins: [ 
                             'postcss-preset-env',//能解决大多样式兼容性问题 
                         ],
                       },
                     },
                   },

        
package.json里配置


          ,
  "browserslist": [
    "ie >= 8"
  ]

  或

  ,
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]
        
CssMinimizerWebpackPlugin
优化和压缩 CSS
教程网址:https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/
安装:npm install css-minimizer-webpack-plugin --save-dev
webpack.config.js里配置

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 //插件
    plugins:[
        
        new CssMinimizerPlugin(),
    ],

        
Devtool
此选项控制是否生成,以及如何生成 source map。
教程网址:https://webpack.docschina.org/configuration/devtool/
webpack.config.js里配置

devtool:"cheap-module-source-map",    开发模式

devtool:"source-map",//打包后生成map映射文件   生产模式
        
oneOf
oneOf是每个文件只能被其中一个loader配置处理
教程网址:https://webpack.docschina.org/configuration/module#ruleoneof
webpack.config.js里配置

   rules:[
            // loader的配置 
            {
                // 每个文件只能被其中一个loader配置处理
                oneOf:[
                    {
                        test: /\.css$/i,  //只检测xxx文件
                        use: [
                            //执行顺序,从后往前
                            'style-loader',// 将js中css通过创建style标签添加到html文件中生效
                             'css-loader', // 将css资源编译成commoonjs的模块到js中 
                            ],
                    },
                    {
                        test: /\.less$/i,
                        use: [ 
                          'style-loader',
                          'css-loader',
                          'less-loader', // 将less编译成css文件
                        ],
                    },
                ]
            },
        ],