关于 webpack 的一些笔记-一一网

webpack 笔记

webpack 五个核心

// 1. Entry（入口）
Entry 指的是 webpack 以哪个文件为入口开始打包

// 2. Output（输出）
Output 指的是 webpack 打包后的文件输出到哪里去

// 3. Loader
Loader 能让 webpack 去处理那些费 JavaScript 文件，因为 webpack 只能解析 JavaSript

// 4. Plugins（插件）
Plugins 指的是插件，在 webpack 中使用插件能达到一些自己想要的效果

// 5. Mode（模式）
Mode 指的是 webpack 中的模式，分为开发者模式（development）与生产者模式（production）
复制代码

webpack 的基本使用

// 这里安装以npm为示例：

// 1. 获取 package.json，也可以称作初始化。
输入指令：npm init

// 2. 安装 webpack以及脚手架
输入指令：npm install webpack webpack-cli

// 3. 打包
运行指令：webpack 需要打包的js文件 -o 需要打包后的路径 --mode=开发环境
以开发环境为示例：webpack ./src/index.js -o build/ --mode=development
复制代码

webpack 的配置文件

// 首先需要在根目录创建一个 webpack.config.js 文件

// 之后可以在该文件中进行配置，例如下面一个简单的例子：

// node 内置核心模块，用来处理路径问题
const { resolve } = require('path');
// 进行 webpack 的配置
module.exports = {
    // 入口 - 可以配置多个入口，也可以进行详细配置
    entry: './src/index.js',
    // 输出
    output: {
        // 输出的文件名
        filename: './main.js',
        // 输出文件的路径
        path: resolve(__dirname, 'build'),
    },
    // loader 的配置
    module: {
        rules: [
            // 这里会进行一些loader的配置，之后再说
        ]
    },
    // 插件
    plugins: [
        // 这里配置一些需要用到的插件，之后再说
    ],
    // 模式 - 分为开发者模式与生产者模式
    mode: 'development',    // 这里以开发者为例
};

// 进行一个简单的配置后，使用命令：webpack 启动
复制代码

webpack 如何打包样式资源呢？

// 1. 首先要有样式文件，这里以CSS、Scss为例
那么就要在入口文件的js中导入样式文件：
import './index.css';
import './index.scss';

// 2. 这里就需要用到loader，那么下载所需的loader
npm install style-loader css-loader sass-loader sass;
注意使用scss时，需要安装的是sass-loader，以及sass

// 3. 在loader中进行配置，如下：
module: {
    rules: [
        // 这里进行loader的配置
        {
            // 匹配的文件 这里是以css结尾的
            test: /\.css$/,
            // 使用哪些loader进行处理
            // loader的执行顺序是 从下往上，从右往左 依次执行
            use: [
                // style-loader的作用是：
                // 创建style标签，将js中样式资源插入到html的head中生效
                'style-loader',
                // css-loader的作用是：
                // 将css文件变成commonjs模块，加载到js中，内容是字符串
                'css-loader'
            ]
        },
        {
            test: /\.(scss|sass)$/,
            use: [
                'style-loader',
                'css-loader',
                // 由于是scss，所以必须把scss编译为css
                'sass-loader'
            ]
        }
    ]
},
复制代码

webpack 打包 HTML 资源

// 1. 首先需要一个HTML模板，最初的模板就好

// 2. 这时需要用到webpack中的五个核心之一“插件”，安装插件：
npm install html-webpack-plugin

// 3. 引入安装的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 4. 在webpack的plugins（插件）中使用，如下：
plugins: [
    new HtmlWebpackPlugin({
        // 表示需要复制哪个html模板
        template: './src/index.html'
    }),
],
复制代码

webpack 打包图片资源

// 1. 同样也需要有图片资源，可以创建一个images文件存放图片

// 2. 下载处理图片资源的loader
npm install html-loader url-loader file-loader

// 3. 在webpack中的loader进行配置
module: {
    rules: [
        // 这里进行loader的配置
        {
            // 处理图片 - 这里目前匹配png与jpg
            test: /\.(png|jpg)$/,
            // 在这里使用一个loader，所以可以这样写
            loader: 'url-loader',
            options: {
                // 图片大小小于 8kb，就会被 base64 处理
                limit: 8 * 1024,    
                // 给图片重命名
                name: '[hash:10].[ext]',    // 注意中间不要有空格     
            }
        },
        // 到这里还不行，因为目前只能处理js中的图片
        // html中的图片依然是没有效果的
        // 所以需要额外加上一个loader进行处理 - html-loader
        {
            test: /\.html$/,
            // 处理html文件的img图片
            loader: 'html-loader',
        },
        ......
    ]
}
复制代码

webpack 的热更新

// 1. 安装 npm i webpack-dev-server

// 2. 在webpack.config.js 中进行配置
module.exports = {
    ......
    // webpack的热更新
    devServer: {
        // 项目打包后的路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
    }  
};

// 3. 使用命令 npx webpack server 启动
复制代码

提取打包后 js 文件中的 css 样式成为单独的文件

// 1. 下载插件 npm install mini-css-extract-plugin

// 2. 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 3. 在webpack.config.js 中进行配置
plugins: [
    new MiniCssExtractPlugin({
        // 对输出的css文件进行重命名
        filename: 'css/index.css'
    }),
    ......
]

// 4. 使用MiniCssExtractPlugin中的loader进行处理
module: {
    rules: [
    	{
            test: /\.css$/,
            use: [
                // 这个loader取代style-loader，把js中的样式提取出来
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        },
        ......    
	]
}
复制代码

样式的兼容性处理

// 1. 安装 npm install postcss-loader postcss-preset-env

// 2. 设置nodejs环境变量 - 不写代表生产模式
process.env.NODE_ENV = 'development';	

// 3. 配置webpack.config.js
module: {
    rules: [
    	{
            test: /\.css$/,
            use: [
                // 这个loader取代style-loader，把js中的样式提取出来
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        // 可以去githup参考最新写法
                        postcssOptions: {
                            plugins: [
                                ["postcss-preset-env"],
                            ],
                        }
                    }
                },
            ]
        },
        ......    
	]
}

// 4. 在package.json中配置浏览器兼容版本
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
        ....可以额外配置
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
        ....可以额外配置
    ]
  }
复制代码

JavaSrcipt的兼容性处理

// 1. 安装 npm install babel-loader @babel/core @babel/preset-env core-js

// 2. 在webpack.config.js进行配置
module: {
    rules: [
        // 这里进行loader的配置
        {
            test: /\.js$/,
            // 排除不是自己写的js代码
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: [
                    [
                        '@babel/preset-env',
                        {
                            // 按需加载
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs: {
                                version: 3,
                            },
                            // 指定兼容性做到哪个版本
                            targets: {
                                chrome: '60',
                                ie: '9'
                            }
                        },
                    ]
                ]
            }
        },
    ]
}
复制代码