网站建设游戏公司,安徽住房和城乡建设厅官网,宝安网站设计哪家好,nginx 搭建wordpress介绍
默认情况下webpack打包后#xff0c;我们的图片和js等文件都会被打包到dist目录下#xff0c;文件多了混淆在一起一方面不利于文件的查找和管理#xff0c;另外一方面看上去也不美观。 所以今天我们学习的内容就是控制输出后的文件进入不同的目录。
一、配置
新增4…介绍
默认情况下webpack打包后我们的图片和js等文件都会被打包到dist目录下文件多了混淆在一起一方面不利于文件的查找和管理另外一方面看上去也不美观。 所以今天我们学习的内容就是控制输出后的文件进入不同的目录。
一、配置
新增47-49行配置
const path require(path);module.exports {// 入口entry: ./src/main.js, // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量代表当前文件的文件夹目录path: path.resolve(__dirname, dist), // 需要用绝对路径 需要用的Nodejs的核心模块 path专门处理路径问题// 文件名filename: main.js,// filename: js/main.js,},// 加载器module: {rules: [// loader的配置{test: /\.css$/, // 只检测.css文件use:[// 执行顺序从右到左从下到上style-loader, // 将js中的css通过创建style标签添加到html文件中生效css-loader, // 将css资源编译成commonJs的模块到js中] },{test: /\.less$/, // 只检测.less文件// loader: xxx, // 配置中只能使用一个loaderuse可以多个use:[// 执行顺序从右到左从下到上style-loader, // 将js中的css通过创建style标签添加到html文件中生效css-loader, // 将css资源编译成commonJs的模块到js中less-loader, // 将less资源编译成css]},{test: /\.(png|jpe?g|gif|webp)$/,type: asset, // 这里使用asset相当于就是webpack4中使用了url-loader来处理parser: {dataUrlCondition: {// 设置小于15k 使用base64// 优点减少请求数量 缺点文件体积变大maxSize: 15 * 1024, }},// 输出图片名称// [hash:10]hash取值前10位 [ext]文件后缀名 [query]携带参数 ?key123maaagenerator: {filename: images/[hash][ext][query]}},],},// 插件plugins: [// plugin的配置],// 模式mode: development,
};官方手册参考
二、资源输出
npm webpack三、效果展示 介绍
前面学习过程中我们发现我们每次打包都需要手动删除dist目录里的文件这样操作起来比较麻烦。 今天我们学习的内容就是来解决这个问题的打包前先自动删除dist目录递归然后再进行新的文件打包生产。
三、配置
新增第12行
module.exports {// 入口entry: ./src/main.js, // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量代表当前文件的文件夹目录path: path.resolve(__dirname, dist), // 需要用绝对路径 需要用的Nodejs的核心模块 path专门处理路径问题// 文件名filename: main.js,// filename: js/main.js,clean: true,},......
}
配置完毕后大家可以将原本的dist目录中的文件名改改再试试打包效果。
