利用Webpack进行js模块化、CSS以及HTML的打包

超、凢脫俗 2024-04-07 14:23 61阅读 0赞

**一、JS模块化打包**

接着上面的示例，在src文件夹下新建module.js文件，内容如下：

const welcomeText = "Hello Webpack,今天是:"+new Date().toLocaleDateString();
    
    //CommonJS规范中的模块输出语法
    
    module.exports={
    
    outputText:welcomeText
    
    }

![b6fb10485c07dbcec74ebfe85c29abac.jpeg][]

修改src文件夹下的index.js文件，通过CommonJS规范中的模块引入语法，引入module.js

//CommonJS规范中的模块引入语法
    
    var module = require('./module.js');
    
    document.write(module.outputText);

![95fc5353463ec364807bb146529fc8b2.jpeg][]

修改package.json文件中的**scripts**节点，增加start命令

"scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    
    "start": "webpack"
    
    },

![6b2b947ee3437ca97de5a376c7dcc3fe.jpeg][]

这样我们就可以在命令终端输入**npm run start**或者**npm start**即可代替之前的**npx webpack**命令了。

![0e9de2a3b6c1b6b61d7b5218a88fa911.jpeg][]

打开dist下的index.js文件，可以观察到js的模块化引入多个js文件已经都被打包到一个js文件中

![5606d809030a2672ff3ea6a8ba693193.jpeg][]

**二、CSS打包**

Webpack中提供了各种loader，它们是专门用来打包除js外其他格式文件的编译、提取、合并和打包等工作。

css文件的打包需要两个loader，分别是**css-loader**和**style-loader**

css-loader：用于加载css文件

style-loader：将打包后的css代码以**<style>**标签形式添加到页面头部

首先安装这两个loader，如下：

**npm install --save-dev css-loader style-loader**

![cba7cad55a44cfb648241782560f800e.jpeg][]

安装完成后，修改**webpack.config.js**文件，增加模块规则引入

module: {
      rules: [
        {
          //正则表达式，表示.css后缀的文件
          test: /\.css$/,
          //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
          use: ['style-loader', 'css-loader']
        }
      ]
    }

![e71dc74f5036c536ae0169e77603811d.jpeg][]

在src文件夹下创建css文件夹，并新增一个style.css

html\{

font-size: 20px;

background-color:aqua;

![fcb4b7979bbde7e0722fee1a6a9dae6b.jpeg][]

在src/index.js文件中引入style.css样式文件

//CommonJS规范中的模块引入语法

var module = require('./module.js');

**import './css/style.css';**

document.write(module.outputText);

通过**npm start**打包后，运行浏览index.html，页面中文字的大小和背景颜色已经生效

![c63710f411c272e70272a8d07e066927.jpeg][]

为了不每次修改后，重新运行**npm start**命令，修改webpack.config.js文件增加watch命令，可实现自动化打包

当**watch**配置为**true**后，通过npm start启动后，一直保持监听状态

![92f917a821cd49f97a3017bbc7719d8d.jpeg][]

此时我们如果修改js或者css，刷新页面就可以看到效果

![24e71abaff367a39db31084f46cddd5e.jpeg][]

**三、图片打包**

和css打包类似，图片打包需要使用到**file-loader**或者**url-loader**，两个包功能类似，主要区别在**url-loader**可以将文件大小小于某个值的图片转换成base64格式。

首先安装**file-loader和url-loader**，命令如下：

**npm install --save-dev file-loader**

**npm install --save-dev url-loader**

![8e4ab741810695f529c3d96da1b4f864.jpeg][]

接着在**webpack.cofig.js**中增加相应配置，这里需要注意的是如果没有设置**options**选项，打包的图片名称会发生变化

**说明：****options**中的**name**属性其实就是图片打包后的路径，其中包括**图片名（\[name\]）**和**图片格式（\[ext\]）**。

module: {
        rules: [
          {
            //正则表达式，表示.css后缀的文件
            test: /\.css$/,
            //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
            use: ['style-loader', 'css-loader']
          },
          {
            //正则表达式，表示图片文件
            test: /\.(png|jpg|gif|svg)$/,
            //针对图片文件使用的loader
            loader: 'file-loader',
            //选项，可以让打包后的图片保持原先的名称
            options: {
              name: 'images/[name].[ext]'
            }
          }
        ]
      }

保存文件修改，可以发现dist下出现images文件夹，并且图片也拷贝过来了

![3e623c57f2a1ee5582f44a03dedf4dbe.jpeg][]

由于我们使用的是**Webpack5**，所以先前配置的**file-loader**已经**被弃用**，所以会导致图片损坏，无法打开，页面背景也无法显示

![c4979e922d70985559f94cdeff704872.jpeg][]

在webpack.config.js中重新调整file-loader配置

module: {
      rules: [{
          //正则表达式，表示.css后缀的文件
          test: /\.css$/,
          //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
          use: ['style-loader', 'css-loader']
        },
        { //正则表达式，表示图片文件
          test: /\.(jpe?g|png|gif|svg)$/,
          //针对图片文件使用的loader
          use: [{
            loader: "file-loader",
            //选项，可以让打包后的图片保持原先的名称,并增加一些前缀
            options: {
              name: "images/[name]-[hash].[ext]",
              esModule: false
            }
          }],
          type: 'javascript/auto',
        },
      ]
    }

此时webpack会将src/images下的图片打包到dist/images文件夹下

![e34c80d27077e52c49ec27694b9b4881.jpeg][]

刷新页面，可以发现图片已经应用到页面背景中

![ad0aea184070ff3123b8307e19800eda.jpeg][]

file-loader可以自动识别css代码中的图片路径，并将其打包到指定目录，如果在js文件中，需要我们将图片资源引入进来，让后将其图片路径添加到图片对象中

//CommonJS规范中的模块引入语法
    var module = require('./module.js');
    import './css/style.css';
    var imgSrc = require('./images/bg.png');
    var img = new Image();
    img.src = imgSrc;
    document.write(module.outputText);
    //将图片添加到网页中
    document.body.appendChild(img);

![76e9afbcf842fd162841367bd804ffc4.jpeg][]

运行后js中使用的图片也能正常显示

![0b59a637c59704b25077fcd2f48d7958.jpeg][]

下面我们介绍**url-loader**，前面说过它和file-loader功能类似，它主要可以对小于某个大小的图片进行base64格式的转化处理

修改webpack.config.js增加url-loader的相关配置

module.exports = {
    
      //需要被打包的js文件路径及文件名
      entry: './src/index.js',
      output: {
        //打包输出的目标文件的绝对路径(其中__dirname为当前目录的绝对路径)
        path: __dirname + '/dist',
        //打包输出的js文件名及相对于dist目录所在路径
        filename: 'index.js'
      },
      module: {
        rules: [
          {
            //正则表达式，表示.css后缀的文件
            test: /\.css$/,
            //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
            use: ['style-loader', 'css-loader']
          },
          {
            //正则表达式，表示图片文件
            test: /\.(jpe?g|png|gif|svg)$/,
            //针对图片文件使用的loader
            use: [{
              loader: "url-loader",
              //选项，可以让打包后的图片保持原先的名称,并增加一些前缀
              options: {
                name: "images/[name]-[hash].[ext]",
                //204800B=204.8KB
                limit: 2048000,
                esModule: false
              }
            }],
            type: 'javascript/auto',
          }
        ]
      },
    
      //mode支持三种:development,production和none
      mode: 'development',
      //监听修改，自动打包
      watch: true
    };

limit属性的作用就是将小于204800B大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理。

如果不写limit属性，那么url-loader就会默认将所有图片转成base64，可以看到图片作为base64格式内容写入到了index.js中

![9827bd6f7a3f5e55b8982cf5d21cab63.jpeg][]

运行查看页面，可以看到图片格式是base64格式的

![4cd8150edae951468310282f1c2624ad.jpeg][]

**四、HTML打包**

前面我们陆续介绍了利用webpack将js、css和图片打包到dist目录下，但是目前我们还是通过在dist目录下创建html页面，然后引入打包后的资源。

其实我们通过**html-webpack-plugin**插件也可以完成html打包

首先安装插件

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

![18e45b56bc866845e610c198fd95a631.jpeg][]

在webpack.config.js中配置**html-webpack-plugin**

//引入html-webpack-plugin插件
    
    const htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = defineConfig({
      publicPath: process.env.NODE_EVN === "production" ? "/sso-web/" : "./",
      outputDir: process.env.outputDir, //使用定义的名字
      lintOnSave: false, //关闭eslint提示
      /* 是否保存时 lint 代码 */
      // lintOnSave: process.env.NODE_ENV === "production",
      /* 放置生成的静态文件目录（js css img） */
      assetsDir: "static",
      // publicPath: "./",
      filenameHashing: false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
      configureWebpack: { //重点 清除浏览器缓存
        output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
          filename: `js/js[name].${timeStamp}.js`,
          chunkFilename: `js/chunk.[id].${timeStamp}.js`,
          //更新一次代码 自动清理文件
          clean: true
        }
      },
      css: { //重点.
        extract: { // 打包后css文件名称添加时间戳
          filename: `css/[name].${timeStamp}.css`,
          chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        }
      },
      module: {
        rules: [{
            //正则表达式，表示.css后缀的文件
            test: /\.css$/,
            //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
            use: ['style-loader', 'css-loader']
          },
          {
            //正则表达式，表示图片文件
            test: /\.(jpe?g|png|gif|svg)$/,
            //针对图片文件使用的loader
            use: [{
              loader: "url-loader",
              //选项，可以让打包后的图片保持原先的名称,并增加一些前缀
              options: {
                name: "images/[name]-[hash].[ext]",
                //204800B=204.8KB
                limit: 20480,
                esModule: false
              }
            }],
            type: 'javascript/auto',
          }
        ]
      },
      //mode支持三种:development,production和none
      mode: 'development',
      //打包需要的各种插件
      plugins: [
        //打包HTML
        new htmlWebpackPlugin({
          //HTML模板路径
          template: './src/index.html'
        })
      ],
      //监听修改，自动打包
      watch: true,
    }

![0e3658088e426f7ff6cc896a0bd79b65.jpeg][]

HTML自身以及其他资源如CSS、图片等均无需手动添加，在打包结束后，所有资源均会自动添加至HTML文件相应位置并进入dist目录中

![10c915241a145bc6d9b7b6c4b5de3243.jpeg][]

**五、webpack-dev-server**

前面我们介绍过监听项目更改，使用了配置

![fde5c0b55b4abf667ab5aa92468abbb6.jpeg][]

我们还可以直接给**package.json中scripts**添加相关配置，而无需更改webpack.config.js

![e05c4c7d4616d232c3a65ea37610d5dd.jpeg][]

Webpack还提供了一个比watch更方便的功能，它不仅可以实现自动打包，还具有自动打开浏览器和自动刷新页面的功能，它就是**webpack-dev-server**

首先安装插件

**npm install --save-dev webpack-dev-server**

![45038499f1353c44dd1b1829ef2eaa4d.jpeg][]

在**package.json中的scripts**下添加相关配置

"scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    
    "start": "webpack --watch",
    
    "dev":"webpack-dev-server --open"
    
    },

![b0f036c6b8c1e6c26570afae8ac5e39b.jpeg][]

请点击

输入命令**npm run dev**，打包结束后浏览器会自动打开，并且正确显示打包后的页面。

![5f74dc3272100ee9f11f971aaf303479.jpeg][]

![6b8c9a41f71094eedfbbae9c156c2853.jpeg][]

通过**webpack-dev-server**打包后的代码并不会出现在dist目录中，而是直接创建了一个开发服务器，同时运行打包的代码。

Webpack打包通常分为两种模式：**开发模式（development）**和**生产模式（production）**  
**开发模式：**开发时使用webpack-dev-server，代码自动打包、自动打开浏览器、自动刷新都可以实现自动化，提高开发效率。

**生产模式：**在代码最终上线时使用，只需要使用到最基本的打包功能，最终打包后的代码会进入到dist目录中，然后上传服务器即可

[b6fb10485c07dbcec74ebfe85c29abac.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/217bfd905151477eb7687709552551bb.jpeg
[95fc5353463ec364807bb146529fc8b2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ac6e98019f684d648cbc9b3864fe832a.jpeg
[6b2b947ee3437ca97de5a376c7dcc3fe.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/23dfee470fa34d00af583814892db481.jpeg
[0e9de2a3b6c1b6b61d7b5218a88fa911.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/51a2385e6c18491699cfcd5049dafd5e.jpeg
[5606d809030a2672ff3ea6a8ba693193.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4fb925b92aa64e49bc328dd79b6d4b66.jpeg
[cba7cad55a44cfb648241782560f800e.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/582be9a4d4c44d4ebfd29d5dbe815cbe.jpeg
[e71dc74f5036c536ae0169e77603811d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f0d0988ef482414f82490a25a772d309.jpeg
[fcb4b7979bbde7e0722fee1a6a9dae6b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f5dfdcc13caa4f8e9c25db3d15a5a9f3.jpeg
[c63710f411c272e70272a8d07e066927.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/82340cd45ed944d9807b746354ab7bdf.jpeg
[92f917a821cd49f97a3017bbc7719d8d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/02951358ee3d4f6d8bd18e758c0a64ce.jpeg
[24e71abaff367a39db31084f46cddd5e.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b673ac4084b643039750c61ff49f96e9.jpeg
[8e4ab741810695f529c3d96da1b4f864.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/097cbce0c35443658949945abc02f6bd.jpeg
[3e623c57f2a1ee5582f44a03dedf4dbe.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7cc4a91a199540089f49b45a7656e736.jpeg
[c4979e922d70985559f94cdeff704872.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3dc0a7490bc54d0c98de086cb738e24d.jpeg
[e34c80d27077e52c49ec27694b9b4881.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d2cfe1432dc7449489d62c411d8ef0d8.jpeg
[ad0aea184070ff3123b8307e19800eda.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5dbee8d722cf4fffbe0e735391879995.jpeg
[76e9afbcf842fd162841367bd804ffc4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f3113ddde53d49278559a3577fdec844.jpeg
[0b59a637c59704b25077fcd2f48d7958.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/89dc543bfbdf41aa8209a092fb54ee5a.jpeg
[9827bd6f7a3f5e55b8982cf5d21cab63.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e8efd35e233e42dc9eff99c21749b817.jpeg
[4cd8150edae951468310282f1c2624ad.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/94318dcf88ab4782bb0533a6709e4119.jpeg
[18e45b56bc866845e610c198fd95a631.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d7df65197f5445de98e32ba647c69484.jpeg
[0e3658088e426f7ff6cc896a0bd79b65.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/90035e75a6564d4dbcdb4336e0655c1f.jpeg
[10c915241a145bc6d9b7b6c4b5de3243.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f1536291873a46dab57649141751c0c0.jpeg
[fde5c0b55b4abf667ab5aa92468abbb6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/14aaf2d3c8b5432f8a811fcf6540da7d.jpeg
[e05c4c7d4616d232c3a65ea37610d5dd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bded32a3391941c98f9a89fe6fdb660a.jpeg
[45038499f1353c44dd1b1829ef2eaa4d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/436a6827a984424aaf95adbe897b1727.jpeg
[b0f036c6b8c1e6c26570afae8ac5e39b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6c097b36477d44d0807523ea790b6225.jpeg
[5f74dc3272100ee9f11f971aaf303479.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8ecf653056504349a273988aab754092.jpeg
[6b8c9a41f71094eedfbbae9c156c2853.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8d9ac879cf3343848827cb055546406e.jpeg