webpack基础学习（一）

webpack是一个静态打包工具

第一步 初始化 package.json

npm init 

第二步 下载依赖并安装 webpack

npm init 

第三步 打包命令

//开发环境
npx webpack ./src/main.js --mode development
//生产环境
npx webpack ./src/main.js --mode production

WebPack配置

5大核心概念

Entry：入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output：输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader：Loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。

Plugins：插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

Mode：模式(Mode)指示 webpack 使用相应模式的配置。

开发模式：编译代码 使代码正常运行 代码质量检查 树立代码规范

创建webpack.config.js文件

处理样式 字体 图片以及其他资源资源

webpack本身不能识别样式资源，需要借助loader帮助识别,css文件会被打包到js文件里

下载包

npm i css-loader style-loader -D

const path=require("path");//nodejs核心模块
module.exports={
    // 入口
    entry:'./src/main.js',
    // 输出
    output: {
      // 文件输出目录
      path:path.resolve(__dirname,'dist'),//绝对路径
      //   文件名
      filename:'main.js'
    },
    module:{
        module:{
        rules: [
            // loader的配置
            {
              // 每个文件只能被其中一个loader配置处理
              oneOf: [
                {
                  test: /\.css$/, // 只检测.css文件
                  use: [
                    // 执行顺序：从右到左（从下到上）
                    "style-loader", // 将js中css通过创建style标签添加html文件中生效
                    "css-loader", // 将css资源编译成commonjs的模块到js中
                  ],
                },
                {
                  test: /\.less$/,
                  // loader: 'xxx', // 只能使用1个loader
                  use: [
                    // 使用多个loader
                    "style-loader",
                    "css-loader",
                    "less-loader", // 将less编译成css文件
                  ],
                },
                {
                  test: /\.s[ac]ss$/,
                  use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader", // 将sass编译成css文件
                  ],
                },
                {
                  test: /\.styl$/,
                  use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader", // 将stylus编译成css文件
                  ],
                },
                {
                  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]",
                  },
                },
                {
                  test: /\.(ttf|woff2?|map3|map4|avi)$/,
                  type: "asset/resource",
                  generator: {
                    // 输出名称
                    filename: "static/media/[hash:10][ext][query]",
                  },
                },
                {
                  test: /\.js$/,
                  exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
                  loader: "babel-loader",
                },
              ],
            },
          ],
    },
    },
    // plugins:{
    // //    plugin的配置
    // },
    mode:"development"
}

处理js资源

EsLint:

可组装的用来检测js和jsx语法的工具 可以配置各项功能，在配置文件里写上rules规则，将来运行EsLint时就会以写的规则对代码进行检查

1、配置文件

配置文件由很多种写法:

.eslintrc. :新建文件，位于项目根目录； .eslintrc； eslintrc.js； .eslintrc.json 区别在于配置格式不一样 package.json中eslintConfig:不需要创建文件，在原有文件基础上写 ESLint会查找和自动读取它们，所以以上配置文件只需要存在一个即可

eslint使用

首先，需要安装 eslint-webpack-plugin：

npm install eslint-webpack-plugin --save-dev

然后把插件添加到你的 webpack 配置。例如：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

.eslintrc.js文件

module.exports ={ 
    // 解析选项
    parserOptions: {}, 
    // 具体检查规则 rules: {},
    // 继承其他规则
    extends:[], 
    // .….
    // 其他规则详见:https://eslint.bootcss.com/docs/user-guide/configuring
}; 

Babel

JavaScript编译器。 主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览 器或其他环境中

1、配置文件

配置文件由很多种写法:

babel.config.*:新建文件，位于项目根目录

babel.config.js
babel.config.json

babelrc.* :新建文件，位于项目根目录

.babelrc
.babelrc.js
babelrc.json

webpackage.json中babel:不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2、具体配置

// 以babelconfigjs 配置文件为例:
module.exports ={
    // 预设 
    presets: []， 
}; 

presets预设简单理解:一个帮你配置babel的preset，根据配置的目标环境自动采用需要的babel插件

@babel/preset-env:一个智能预设，允许您使用最新的JavaScript。
@babel/preset-react:一个用来编译Reactjsx语法的预设
@babel/preset-typescript:一个用来编译TypeScript语法的预设

安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

用法

在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中，就像下面这样：

module: {
  rules: [
    {
      test: /.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        //可以单独写一个文件也可以写在WEBPACK文件里
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

打包Html资源

loader: 1. 下载； 2.使用（配置loader） plugins: 1. 下载； 2.引入；3.使用

cnpm i html-webpack-plugin -D

// 插件配置 plugins: [ // 复制一份HTML文件，并自动引入打包资源（js/css）
// 新的文件特点 1结构和原来一致 2会自动引入打包输出的资源
new HtmlWebpackPlugin({ template: './src/index.html', }), ],

devServer

开发服务器，自动化开发（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出

npm install webpack-dev-server --save-dev
devServer: {
      host:"localhost",//祁东服务器域名
      // 启动gzip压缩
      compress: true,
      // 端口号
      port: 3000,
      // 自动打开浏览器
      open: true
    },
  //启动命令 npx webpack serve

//运行开发模式文件
npx webpack serve --config ./config/webpack.dev.js
//运行生产模式文件
npx webpack --config ./config/webpack.prod.js

额外配置 为了方便启动，可以配置启动命令

package.json

{
    "scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  },
}

启动开发服务器

npm run dev

CSS处理

CSS先回渲染DOM节点，然后当加载js时会创建一个style的标签来生成样式，这样网站会出现闪屏现象，用户体验不好。我们应该是单独的CSS文件，通过link标签加载性能才会好一些。

安装包

npm install --save-dev mini-css-extract-plugin
//引入插件
// webpack.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
            test: /\.css$/,
            use: [
                // 创建 style 标签，将样式放入
                // 'style-loader',
                // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
                MiniCssExtractPlugin.loader,
                // 将 css 文件整合到 js 文件中
                'css-loader'
            ]
        }
       ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // 对输出的 css 文件进行重命名
            filename: 'css/built.css'
        })
    ],
    mode: 'development'
};

CSS兼容处理

//安装依赖
npm install --save-dev postcss-loader postcss-preset-env

//兼容浏览器程度

封装loader函数

// 用来获取处理样式得loader function getStyleLoader(pre){ return [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss 的插件 require('postcss-preset-env')() ] } }, pre, ].filter(Boolean); }

CSS压缩

//安装依赖，此插件使用cssnano优化和压缩css,支持缓和和开发模式下运行
npm install --save-dev optimize-css-assets-webpack-plugin

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

plugins: [ new CssMinimizerPlugin(), ],

默认开启生产模式已经开启了HTML和js压缩，不需要进行额外的配置

基础总结