webpack初始

首先webpack是一个打包工具，我们写的项目中，打包很多都需要他的帮忙，我之前的话，不了解，一直看不懂这个文件是干嘛用的。所以学习一下webpack，方便以后优化，今天我来总结一下webpack的一些简单的知识点！

webpack的入口文件 index.js(如果需要改文件路径，也是可以的)

   1.运行指令:

    开发环境: webpack ./src/index.js -o ./build/main.js --mode=development

        webpack会以./src/index.js 为入口文件打包输出到 ./build/main.js文件

        整体打包环境是开发环境

    生产环境: webpack ./src/index.js -o ./build/main.js --mode=production

        webpack会以./src/index.js 为入口文件打包输出到 ./build/main.js文件

        整体打包环境是生产环境

   2.结论

        1.webpack能处理js/json资源，不能处理css/img等其他资源

        2.生产环境和开发环境讲ES6模块化贬义词浏览器能识别的模块化~

        3.生产环境比开发环境多一个压缩js代码

这是一些webpack简单的代码 

/*
    webpack.config.js webpack的配置文件
        作用:指示webpack干那些活(当你巡行webpack指令时,会加载里边的配置)

        所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
*/
const { resolve} =require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");//（这是一个打包html的插件）
const miniCssExtractPlugin = require("mini-css-extract-plugin");//这个打包css文件的插件

module.exports ={
    // webpack配置
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        // 输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path:resolve(__dirname,'bulid')
    },
    //loader的配置
    module:{
        rules:[
            // 详细的loader配置
            // 匹配那些文件
            {
            test: /\.css$/,
            use:[
                // use数组中loader执行顺序:从右到左,从下到上执行
                // 创建style标签,将js中样式资源插入进行,添加到head中生效
                'style-loader',
                // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                'css-loader'
            ]
            },
            {
                test: /\.less$/,
                use:[
                      miniCssExtractPlugin.loader,,
                    'css-loader',
                    // 将less转化为css文件
                    'less-loader'
                ]}
        ],
    },
    // plugins的配置
    plugins:[
      // html-webpack-plugin
    // 功能创建一个空的html,自动引入打包输出的所有资源(js/css)
    // 需要一个有结构的html文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件,并自动打包输出所有资源(js/css)
      template: "./src/index.html",
    }),
 new miniCssExtractPlugin({
      filename: "css/bulit.css",
    }),],
    // 模式
    mode:'development',
    // mode:'production'
}

 其中打包图片资源webpack5已经有了,但是html中的图片还是需要配置

这个就是rules中的代码

 {
        test: /\.html$/,
        // 渲染处理html中图片路径
        loader: "html-loader",
      },

除了这些 还有css兼容需要看浏览器是否兼容,这就使得需要特殊的插件去兼容css

postcss-loader

 {
        test: /\.css$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                ident: "postcss",
                plugins: ["postcss-preset-env"],
              },
            },
          },
        ],
      },

还有js兼容es6=>es5需要babel

 const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

//这中间是关于js文件的转化
 {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [["@babel/plugin-transform-runtime"]],
          },
        },
      },


optimization: {
    minimizer: [new CssMinimizerWebpackPlugin()],
  },

我大致知道的也就这么多!随着webpack的更新 很多都不能按照以前写了,如果不行的话,可能就是版本的问题!