【webpack】基础总结

webpack

 开发模式：仅编译js中module
 生产模式：可以编译js中module，压缩js代码

下载webpack 包

npm init -y
npm i webpack  webpack-cli -D
npm webpack ./src/main.js --mode=development  开发环境
npm webpack ./src/main.js --mode=production  生产环境

webpack 核心概念

1. entry 入口文件：指定webpack从哪个文件开始打包; 单文件入口以字符串的形式,多文件入口以对象的形式引入。
2. output 输出文件：指定打包完的文件输出到哪里，一般在dist文件中。
3. module 配置loader加载器，webpack只能处理js.json等资源，其他资源需要借助loader，webpack才可以解析。
4. plugins 插件：扩展webpack的功能。
5. mode 模式：开发模式和生产模式。

处理JS资源
webpack对js处理是有限的，只能编译js中es模块化语法，不能编译其他语法，导致js不能在IE浏览器运行，因此需要做兼容性处理，使用babel完成；代码格式使用eslint完成。

.eslintignore 忽略打包文件 dist

Babel 编译器
主要用于将ES6语法编写的代码转化为向后兼容的js语法，以便能够运行在当前和旧版的浏览器。
安装：npm i -D babel-loader @babel/core @babel/preset-env

在babel.config.js文件中

module.exports = {
   presets: ['@babel/preset-env']
}

在webpack.config.js文件中

const EslintPlugin = require('eslint-webpack-plugin') // eslint插件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 处理html资源
const MiniCssExtractPlugin = require('mini-css-extrat-plugin') // 提取css成单独文件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //css压缩

module.exports = {
 entry: "./src/main.js",
 output：{
   path: path.resolve(__dirname,'dist'), // 文件输出路径
   filename: 'staic/js/main.js',
   clean: true // 自动清空上次打包的内容
 },
 module: {
   rules:[
     // 处理css资源，下载依赖
     {
        test: /\.css$/,
        use: [ 
           MiniCssExtractPlugin.loader,
          'style-loader',
          'css-loader', // 将css资源编译成common.js模块到js中 
          {
             loader: 'postcss-loader',
             options:{
                postcssOptions:{
                   plugins:['postcss-preset-env'] //解决大多数样式兼容问题
                }
             }
          }
        
        ]
     },
     // 处理less资源,下载依赖
     {
        test: /\.less$/, // 只检测css文件
        use: ['style-loader','css-loader','less-loader']
     },
     // 处理sass或scss文件
     {
        test: /\.s[ac]ss$/,
        use: ['style-loader','css-loader','sass-loader']
     },
     // 处理图片资源
     {
        test: /\.(png|jpeg|gif|webp|svg)$/,
        type: 'asset',
        parser: {
           // 将小于10kb的图片转化为base64，减少请求数量
           dataUrlCondition:{
              maxSize: 10*1024 
           }
        },
        generator: {
           filename: 'static/images/[hash:10][ext][query]'
        }
     },
     // 处理字体图标
     {
        test: /\.(ttf|woff2|mp3|mp4|avi)$/,
        type: 'asset/resource',
        generator: {
           filename: 'static/media/[hash:10][ext][query]'
        }
     },
     // 处理浏览器兼容babel，exclude和include只可以配置一个
     {
        test: /\.js$/,
        exclude: /node_modules/, // 排除此文件中js文件，不进行处理
        // include: './src', 只处理 src文件
        loader: "babel-loader"
     },
   ]
 },
 plugins:[
    new EslintPlugin({ context: path.resolve(__dirname,'src') }),
    // 新文件的特点：结构和原来一样，自动引入打包输出的资源模版，以源文件中public/index.html文件创建新的html文件
    new HtmlWebpackPlugin({ template: path.resolve(__dirname,'public/index.html') }),
    new MiniCssExtractPlugin({ filename: 'static/css/main.css' })
    new CssMinimizerPlugin()
 ],
 mode:'development',
 // 打包自动化，在开发环境中使用 devServer 
 devServer: {
    host: 'localhost', // 启动服务器域名
    port: '3000', // 启动服务器端口号
    open: true // 是否自动打开浏览器
 }
}

在.eslintrc.js文件中

module.exports = {
  extends: ['eslint: recommended'],
  env: {
     node: true, // 启用node中全局变量
     browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
     ecmaVersion: 6, // 版本号
     sourceType: 'module',
  },
  rules: {
     'no-var': 2, // 禁止使用var定义变量
  }
}

在package.json文件中

{
  'start':'npm run dev',
  'dev':'webpack serve --config ./config/webpack.dev.js', 开发模式命令
  'build':'webpack --config ./config/webpack.prod.js', 生产模式命令
  'browserslist': [
    '>1%', // 覆盖99%的浏览器
    'last 2 versions', // 所有浏览器最近的2个版本
    'not ie<=10' // 不要ie 10以下的版本
  ]
}