webpack - JUZI's blog

webpack的概念

webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

安装

一、搭建项目目录

 webpack-learn
 |- /src
|- index.js
|- index.html

初始化package.json:

npm init -y

npm init将所在目录设为npm package。

二、安装webpack

推荐局部安装，全局安装会造成版本指定，如果多个项目依赖的版本不同，会造成构建失败

npm i webpack webpack-cli -D

webpack4需要引入webpack-cli，执行上述命令后，会生成一个node_modules文件夹和一个package-lock.json文件

使用webpack

修改package.json文件夹，添加一个build（构建）脚本

"scripts": {
  "build": "webpack"
}

然后执行命令

npm run build

输出如下图所示：

webpack4之前需要在webpack.config.js文件中指定入口点和输出文件。这里没有报错，因为从webpack4开始，默认将./src/index.js这个文件定义为入口点（entry point），默认在./dist/main.js输出（output）。

production（生产）和development（开发）模式

webpack4引入了生产模式和开发模式

修改package.json文件夹中的script

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

此时执行npm run dev，查看./dist/main.js

是一个没有压缩过的bundle（包）文件。

而执行npm run build时，生成的是一个压缩后的bundle

production mode(生产模式) 可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking 等。development mode(开发模式)针对速度进行了优化，仅仅提供了一种不压缩的 bundle 。

webpack配置

新建一个bro.js

const bro = (greetings) => {
    return `${greetings}, bro`
}

export {
    bro
};

在index.js中引入

import {
    bro
} from './bro';

console.log(bro('Dude'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

控制台输入http-server -o 运行，得不到想要的结果。因为webpack默认只能理解JavaScript和JSON文件，需要通过loader或插件（plugin）使得webpack能够处理其他的文件。

在主目录下新建一个webpack.config.js文件夹，在这个文件中自定义配置。

HTML webpack插件

命令行输入安装相对应的loader

npm i -D html-webpack-plugin html-loader

修改webpack.config.js文件

// 引入插件
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
        rules: [{
            // loader的两个属性
            test: /\.html$/,	// test: 识别哪些文件会被转换
            use: [{			// use: 定义出在进行转化时，应该使用哪个loader
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }]
    },
    // 插件
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
}

修改完成后，再次执行npm run build，会看到dist目录下生成了一个index.html文件

再次运行，可以看到控制台成功输出

webpack dev server

使用webpack dev server，每次更改文件后，都会自动刷新浏览器窗口

npm i -D webpack dev server

安装完成后修改package.json文件，在script标签中添加

"scripts": {
    "start:dev": "webpack-dev-server"
  },

然后在控制台中执行npm run start:dev就可以启动了

babel

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

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

修改webpack.config.js文件，rules中添加以下配置即可

{
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
     	loader: "babel-loader"
	}
}

加载图片

在index.html文件中添加一张图片

<body>
    <img src="images/dindang.jpg" alt="">
</body>

安装file-loader

npm i -D file-loader

修改webpack.config.js文件，rules中添加以下配置

{
     test: /\.(png|svg|jpg|gif)$/,
     use: ['file-loader']
}

编译后可以看到dist中生成了一个图片文件，并且页面中也能显示图片了

样式

添加一个scss文件

$bg: blue;
body {
    background: $bg;
}

在index.js文件中引入

import './styles/main.scss';

安装

npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin

修改webpack.config.js文件

const HtmlWebPackPlugin = require("html-webpack-plugin");
// 引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [{
                    loader: "html-loader",
                    options: {
                        minimize: true
                    }
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            // 添加loader
            {
                test: /\.scss$/,	// 查找scss后缀的文件
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        // 添加插件
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

运行可以看到样式已经生效

完整代码

https://github.com/juzi123/webpack-learn

参考

https://webpack.docschina.org/

https://www.youtube.com/watch?reload=9&v=TzdEpgONurw

https://www.html.cn/archives/9436