webpack第三方模块处理样式、字体、图片、等

最新推荐文章于 2024-01-19 22:56:57 发布

$(薛定谔的喵)

最新推荐文章于 2024-01-19 22:56:57 发布

阅读量761

点赞数

分类专栏： web前端文章标签： webpack第三方模块处理样式、字体、图片、等 webpack-loader

本文链接：https://blog.csdn.net/chad97/article/details/86766613

版权

本文介绍了如何使用webpack处理第三方模块中的样式、字体和图片资源。详细讲解了配置html-webpack-plugin启动页面，打包css、less、sass文件，处理css中的路径，特别是对字体文件和图片大小限制的处理。通过示例展示了webpack.config.js的配置方法和相关loader的使用。

摘要由CSDN通过智能技术生成

续上一篇blog：使用webpack和webpack-dev-server

使用html-webpack-plugin插件配置启动页面

由于使用–contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
   
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: {
    // 配置输出选项
            path: path