qq_45178972的博客

Loader是用于特定的模块类型进行转换Plugin可以用户执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等cleanWebpackPlugin:每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，可以借助cleanWebpackPlugin使用：在webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins:[ new CleanWebpackPl

在webpack.config.js{ test:/\.ttf|eot|woff2?$/i, type:"asset/resource", generator:{ filename:"font/[name].[hash:6][ext]" } }css :@import url(“xxx”);js: import “xxx”

webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader，url-loader、file-loaderwebpack5之后，我们可以直接使用资源模块类型（asset module type）,来替代上面的这些loader资源模块类型（asset module type），通过添加4种新的模块类型，来替换所有这些loader：asset/resource 发送一个单独的文件并导出URL，之前通过使用file-loader实现；asset/inline 导出一个资源的d.

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI，就是可以和网页一起请求下来{ test:/\.(png|jpe?g|gif|svg)$/, use:[ { loader:'url-loader', options:{ name:"img/[name].[hash:6].[ext]", limit: 15 * 1024 //单位：B 小于15KB的会用base64转换，大于

要处理jpg、png等格式的图片，我们也需要有对应的loader： file-loaderfile-loader的作用就是帮助我们处理import/require()等方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；当然也可以修改它的名字和所在文件夹安装该loadernpm install file-loader -D使用require或import引用图片资源img.src = require('../image/1.jpg').default;-----------------

1.定义：postcss是一个通过JavaScript来转换样式的工具这个工具可以帮助我们进行一些css的转换和适配，比如自动添加浏览器前缀、css样式的重置但是实现这些功能，我们需要借助于PostCss对应的插件,2，首先安装npm install postcss postcss-cli -D再安装插件：npm install autoprefixer -D然后npx postcss --use autoprefixer -o result.css ./src/css/test.css 指定要

css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader { // 规则使用正则表达式 test:/\.css$/, //匹配资源 use:[ // {loader:'style-loader'},{loader:'css-loader'} //使用顺序是从后往前 'style-loader','css-loader' .

1.在根目录新建webpack.config.jsconst path = require('path');module.exports = { entry:'./src/main.js', output:{ filename:'bundle.js',//打包后的文件名 path:path.resolve(__dirname,'./build'), //__dirname是指当前文件(webpack.config.js)的绝对路径 //拼接上'./build'目录,因为p

1.es6的导出 和导入export { }import { } from './js/math.js'2.common Js 的导出和导入module.exports = {add,mul}const {add ,mul} = require('./js/math.js');3.执行webpack命令时会发生什么？会在当前目录找 src/index.js文件作为入口，然后看一下index.js引入了哪些东西4.npm init -y 作用是：生成package.json然后np

webpack是一个静态的模块化打包工具，打包bundler: webpack可以将帮助我们进行打包，所以他是一个打包工具；静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；模块化module：webpack默认支持各种模块化开发，ES Module，Common JS，AMD等；工作中的webpack：比如给某些目录结构起别名；让项目支持sass，less等预处理器，希望在项目中手动地添加TypeScript的支持，都需要对webpack进行一些特殊