初识webpack（entry，output，plugins，module，mode，devServer，optimization）

前言

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它的主要功能是将应用程序的各种资源（如 JavaScript、CSS、图片等）视为模块，并将这些模块打包成一个或多个输出文件，以便在浏览器中使用。Webpack 的核心理念是将所有的资源视为模块，通过依赖图来管理模块之间的关系。

webpack五个核心概念

Entry:入起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
Loader: loader让webpack 能够去处理那些非JavaScript 文件
Plugins: 插件则可以用于执行范围更广的任务。例:打包优化、压缩
Mode:横式，有生产模式 production 和开发模式development

1.安装webpack

全局安装

npm install webpack webpack-cli -g

局部安装

npm install webpack webpack-cli -D

2.初始化webpack

使用命令，然后根据需求自行修改内容

npx webpack init ./ --force --template=defaul

手动创建webpack.config.js文件

3.配置webpack （webpack.config.js）

1.entry

定义了 Webpack 开始构建依赖图的起点，一般从src文件下的index.js文件开始

单入口：

module.exports = {
  entry: './src/index.js'
};

多入口：

module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js'
  }
};

2.ouput

配置如何输出打包后的文件。

主要配置项包括path和filename。

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

path：指定输出文件的目录，这里使用path.resolve方法来获取绝对路径，__dirname是当前文件所在的目录，输出文件将被放置在dist目录下。

filename：定义输出文件的名称，这里是bundle.js。如果是多入口配置，还可以使用占位符来生成不同的文件名，例如[name].bundle.js，其中[name]会被替换为入口的名称（

3.module

用于配置如何处理不同类型的模块，主要通过rules来定义加载器（loader）

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

test：一个正则表达式，用于匹配需要处理的文件类型。这里匹配所有.css文件。

use：是一个数组，指定了处理该类型文件的加载器。加载器的执行顺序是从右到左，所以先执行css - loader，再执行style - loader。

4.plugins

插件可以用于执行范围更广的任务，比如优化、压缩等。

以html-webpack-plugin为例，先通过npm i html-webpack-plugin --save-dev下载

const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

还有很多其他插件，如uglifyjs - webpack - plugin用于压缩 JavaScript 代码、mini - css - extract - plugin用于提取 CSS 到单独的文件等。

5.mode

可以设置为development或production。

在development模式下，Webpack 会提供一些方便开发的功能，如代码的详细报错信息、模块热替换等。在production模式下，Webpack 会进行优化，如压缩代码、去除调试信息等。

module.exports = {
  mode: 'development'
};

6.devServer

用于在开发过程中提供一个本地服务器，方便开发和调试

基础配置：

const devServer = {
  contentBase: './dist',
  port: 9000
};
module.exports = {
  devServer: {
        open:true,
        port:9000,
        contentBase: './dist',
    }
}

contentBase：指定服务器从哪个目录提供静态文件，这里是dist目录。

port：定义服务器监听的端口号，这里是 9000。

open:运行时自动打开页面

7.optimization

用于配置 Webpack 的优化策略

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这个配置会自动将公共的模块（如第三方库）从主打包文件中分割出来，生成单独的文件，从而减少主文件的大小，提高加载性能。

4.其他

1.postcss和autoprefixer

PostCSS 是一个用 JavaScript 编写的工具，用于转换 CSS 样式。它可以通过一系列的插件来对 CSS 进行处理，这些插件能够完成诸如添加浏览器前缀、压缩代码、将 CSS 未来特性转换为当前浏览器可识别的语法等多种功能。

Autoprefixer 是 PostCSS 的一个插件，它的主要功能是自动添加浏览器前缀。不同的浏览器对 CSS 属性的支持程度不同，有些属性需要添加特定的前缀才能在某些浏览器中正常工作。例如，-webkit-前缀用于 Safari 和 Chrome（旧版本），-moz-前缀用于 Firefox（旧版本）等

实现：

1.通过npm i postcss-loader --save-dev 下载postcss
2.在webpack.config.js文件中的module中的rules中添加postcss-loader
3.与webpack.config.js同目录下创建postcss.config.js文件
4.通过npm i autoprefixer
5.在postcss.config.js文件中使用autoprefixer

webpack.config.js

 module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    // MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 'less-loader',
                    'postcss-loader'   //是一个编译平台
                ],//从右到左
                //css-loader会把css文件变成webpack自己认识的js
                //style-loader会把css插入到html中
                //less-loader会把less文件编译成css文件
            },
        ]
    }

postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer')
    ]
}