webpack入门

最新推荐文章于 2025-05-28 17:44:09 发布

转载最新推荐文章于 2025-05-28 17:44:09 发布 · 309 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ae919eb518825670e5cdc90

web前端同时被 2 个专栏收录

294 篇文章

订阅专栏

nodejs

38 篇文章

订阅专栏

本文详细介绍了Webpack的基本概念，包括安装、项目创建、代码构建等核心流程。深入探讨了Webpack的配置方式，从零配置到复杂项目的配置文件编写。此外，还讲解了如何使用Webpack处理HTML、CSS、图片等资源，以及如何搭建本地静态服务并实现自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是webpack？

从上图中可以看到，webpack可以做如下的事情

打包所有的脚本
打包所有的图片
打包所有的样式

一句话：打包所有的资源。

1、webpack安装：

webpack是基于Node的，在安装Webpack之前需要安装Node环境。nodejs的安装链接：https://blog.youkuaiyun.com/liuxiao723846/article/details/48519593

注：在这里安利一个node版本管理插件 nvm, 可以实现本地多个node 版本自由转换。（https://github.com/creationix/nvm/blob/master/README.md）

然后可以利用npm安装webpack工具，以及各种插件：（后面会一一介绍）

npm install webpack webpack-cli webpack-dev-server

2、创建webpack项目：

1）初始化工程：

mkdir webpack-test
cd webpack-test
npm init  #一路回车，然后最后输入yes即可

最终，生成了package.json文件，如下：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "echoliu",
  "license": "ISC"
}

2）安装webpack环境：

#在webpack-test目录下执行
npm install webpack webpack-cli --save-dev

这是会在项目目录下生成node_modules文件夹，将相关依赖都下载到该文件夹内。此外，package.json文件也发生了变化，加入了依赖属性。

注：--save-dev选项是指作为开发时依赖，如果是--save是指运行时依赖。前者在package.json中是devDependencies，后者是dependencies。例如，通过下面命令，安装moment库：

npm install moment

最终，package.json文件内容如下：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "echoliu",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.26.0"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

3）开发代码：

手动创建src目录，然后创建index.js文件（webpack4默认的入口文件是src/index.js），内容如下。当然根据业务，也可以创建各种js文件，将不同业务写入其中，但入口只能是index.js。

// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());

这是，可以通过执行如下命令验证是否有语法错误。node src/index.js

3、webpack构建项目：

在 webpack 4 中，可以无须任何配置使用也就是 0配置，然而大多数项目会需要很复杂的设置，所以 webpack 仍然支持使用配置文件的方式。

3.1）零配置构建：

npx webpack

构建成功后会在项目目录下自动生成一个dist目录，同时生成构建后的js文件： main.js（默认名字），默认这个文件是压缩过的。然后，我们在dist目录下创建一个index.html文件，用来在浏览器上测试（上面在nodejs中已经测试过了index.js）：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

1）npx：

npm 5.2.0 版本中内置了伴生命令npx，类似于 npm 简化了项目开发中的依赖安装与管理，npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装, 这里的PATH 就是项目 node_modules。如果npm版本较低，可以全局安装 npm install -g npx

2）不同的打包模式：

通过查看构建后的main.js文件，可以看到是压缩后的代码，这是因为 webpack 提供了不同的打包 mode：

npx webpack --mode production //构建用于发布的代码, 代码会压缩
npx webpacck --mode development //开发过程中构建代码, 代码不压缩

3.2）配置文件构建：

在项目根目录下手动创建 webpack.config.js，内容如下：

let path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

然后执行npx webpack 命令执行构建。

1）filename属性：

如果想保持和源文件相同的名字则可以这样配置 '[name].js'；如果要加上hash值，则 '[name].[hash].js'，这时生成的js文件名中会带有一串hash值。

4、html 文件之构建：

上面在验证构建后js是采用的手动方式去创建 html，并手动引入，如何使用webpack来自动构建呢？

1）下载插件：

npm install html-webpack-plugin --save-dev

2）修改webpack.config.js：

let path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new htmlWebpackPlugin({
          filename: 'a.html', //构建后生成的文件的名字
          chunks: ['index'],  //构建时所用到的js源文件， 与 entry 中的 key 一一对应
          //template: './src/index.html',//所用到的html源文件，考虑到一个项目可能有多个html文件
          hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值
        })]
}

然后执行npx webpack，就可以看到dist目录下的html文件，并且自动将js引入了进来。

5、css 文件之构建：

安装插件 npm i extract-text-webpack-plugin@next -D
安装相应的css loader : npm i style-loader css-loader -D
在index.js中文件引入 index.css 文件
在webpack.config.js中引入插件

修改webpack.config.js:

1)style 标签载入 css文件:

plugins: [
        cssExtract,
        new HtmlWebpackPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

2)以link方式载入css文件，也就是抽离css文件:

  {
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
        }]
    })
  }

6、图片处理：

html文件中引入img 标签，这里需要用到 html-withimg-loader。首先安装插件：

npm i html-withimg-loader -D
#i 表示install
#-D 表示--save-dev

然后修改webpack.confg.js：

module: {
	rules:[
		{
		    test: /\.(png|gif|jpg)$/,
		    use: [{
		        loader: 'url-loader'
		    }]
		},{
		    test: /\.html/,
		    // 处理html中的图片loader
		    use: 'html-withimg-loader'
		}
	]
}

构建后dist目录下的 html 中的 img标签：<img src="https://img-blog.csdnimg.cn/2022010618293476998.png'/>
当然大多数情况下，会选择将引用的图片构建在 dist/images 目录中，此时只需将上述配置稍加修改即可：

{
    test: /\.(png|gif|jpg)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 5,   //
            outputPath: 'images/'   //构建后的目标目录
        }
    }]
},{
    test: /\.html/,
    // 处理html中的图片loader
    use: 'html-withimg-loader'
}

7、本地静态服务，自动刷新：

首先安装：

npm i webpack-dev-server -D

然后在webpack.config.js中加入：

 devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 4000,
        open: true,
        hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
    }

执行 npx webpack-dev-server, 即可看到浏览器自动打开，并加装构建后的html文件。

那如何才能真正地自动构建，自动刷新，解放双手呢？ webpack 内置插件 HotModuleReplacementPlugin ，new webpack.HotModuleReplacementPlugin()
删除构建的历史文件，可以使用插件，clean-webpack-plugin

参考：https://juejin.im/post/5ae919eb518825670e5cdc90

最后，提出一个疑问？

我们都知道，现在可以通过npm来管理js的库了，有些js库使用npm下载到node_modules中后，在其文件夹中会有XXX.js以及min文件夹中XXX.min.js这样的js库文件，这时就很方便我们使用原生html通过<scripts>标签引入，然后使用。

但是有的js库通过npm下载后（例如：generate-schema库，在其文件夹下只有一个bin目录，里面是一个二进制），是没有对应的js库文件的（只有源码js文件），这种我们可以在nodejs中使用，那在html中该如何使用呢？

答案：

1、在html中用script标签引入，如果该模块支持的话，或者提供专门的版本；
2、借助Webpack或者Browserify打包后，在html中引入；