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配置

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配置

{
  "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案例使用

js里引用

import css from 'file.css';
        

webpack.config.js里配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

less-loader案例使用

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案例使用

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案例使用

js里引用

import "./stylus/index.styl";
        

webpack.config.js里配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
                'style-loader', 
                'css-loader',                     
                'stylus-loader',// 将 Stylus 文件编译为 CSS
            ],
      },
    ],
  },
};

下载字体

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

插件eslint

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案例使用

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案例使用

webpack.config.js里配置

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

//插件
    plugins:[
        // plugin的配置 
        new HtmlWebpackPlugin()
    ],
        

DevServer

webpack.config.js里配置

   // 开发服务器：不会输出资源，在内存中编译打包
    devServer: {
        host:"localhost",// 启动服务器域名
        port:"3000",// 启动服务器端口号
        open: true,// 是否自动打开浏览器
      },
        

MiniCssExtractPlugin

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

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

webpack.config.js里配置

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

        

Devtool

webpack.config.js里配置

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

devtool:"source-map",//打包后生成map映射文件   生产模式
        

oneOf

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文件
                        ],
                    },
                ]
            },
        ],