## asset-modules模块 https://webpack.docschina.org/guides/asset-modules/ ## 入口文件问题(index.html建议在根目录下) ![](https://img.kancloud.cn/95/0b/950b347a7af7d1fbc5cda52844a7ad47_496x157.png) > 不知为何只有在**index.js**即入口文件才能进行`import` > ![](https://img.kancloud.cn/4e/5d/4e5d061d814fcc47c1966390d6d28a37_493x91.png) ## 多个html入口(html-webpack-plugin) ![](https://img.kancloud.cn/5b/15/5b15a8b2a652c73c85fda55c5194cf0b_642x347.png) > filename:输出位置/名称 > template:输入模版 > chunks:指定加载js ## 复制文件(copy-webpack-plugin) ![](https://img.kancloud.cn/d0/1e/d01ed3b1f25e154b0689da54b2b04ad8_591x295.png) > 目前只拿来复制第三方框架源码和指定js文件 ## css/less 的配置 `npm install style-loader css-loader less-loader less` ### webpack.config.js文件 ``` module: { rules: [ { test: /\.(less|css)$/, use: ['style-loader', 'css-loader', 'less-loader'], } ] } ``` > 打包后会合并到 **html** 中去 > 扩展独立css文件 `mini-css-extract-plugin` ![](https://img.kancloud.cn/78/17/7817c71afdf85766b523988c03395bf3_742x390.png) ## 图片使用 asset/resource (webpack5自带) ### webpack.config.js ``` { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', } ``` ### 背景图引用 ``` background: url('../../images/401.jpeg') no-repeat center; background-size: 100%; ``` ### 动态添加div ``` import imgSrc from './asset/images/401.jpeg'; ... var img = new Image(); img.src = imgSrc; document.body.appendChild(img); ``` > 打包后都会生成在目录中 ![](https://img.kancloud.cn/b6/5b/b65beb0f3bcfbdddfdcdca6e0529efe4_607x117.png) > assetModuleFilename自定义输出目录/名称+[ext][query]后缀