3-4 webpack4插件-拷贝静态文件(以及错误解决)

本文介绍了如何使用copy-webpack-plugin在webpack4中拷贝静态文件,如图片和文档。通过安装插件、配置webpack.config.js,将public中的资源复制到build目录。注意,不同版本的插件配置可能存在差异,遇到错误时需检查是否因版本更新导致,可参考官方文档解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

拷贝静态文件

这里的静态文件是指项目中未引用到的一些资源,比如一些图片、开发文档等。如果开发完成后,需要保留这些静态资源,要一起打包到项目中去,就需要拷贝静态文件,用到copy-webpack-plugin插件。
例如下图就是把public中的静态资源拷贝到build文件夹下:
在这里插入图片描述

具体步骤

1.安装插件
打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev copy-webpack-plugin

2.配置webpack.config.js文件
首先,引入插件:

const CopyWebpackPlugin = require('copy-webpack-plugin');

3.在module.exports = {}里的plugins里写配置:

new CopyWebpackPlugin({
     patterns: [
       { from: __dirname+'/public/assets', to: __dirname+'/build/assets' },
     ],
   }),

4.在终端输入npm run dev进行打包。


!!!此处需要注意的是:
原来的版本,在module.exports = {}里的plugins里写配置为:

new CopyWebpackPlugin([
	    {
	      from:__dirname+'/public/assets',
	      to:__dirname+'/build/assets'
	    }
   ]),

如果在最近的版本中这样写就会报错,报错为:Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.如下图:
在这里插入图片描述
注:我的copy-webpack-plugin版本为:
在这里插入图片描述
所以,在安装webpack插件的时候,如果报错,需要检查一下是不是由于版本更新,而更新了使用插件的写法所导致的错误。可以去官网查一下插件的使用方法。
官网链接: https://webpack.js.org/plugins/copy-webpack-plugin/.

<think>我们正在讨论Webpack4中配置资源压缩的方法。根据引用[1]和[2],我们可以使用UglifyJsPlugin来压缩JavaScript代码,并且可以通过设置mode为&#39;production&#39;来启用生产环境下的默认优化(包括压缩)。另外,引用[2]中还提到了devServer的配置,但这不是关于压缩的,而是关于开发服务器的。引用[3]提到了将静态资源压缩并拷贝至目标文件夹,但具体配置需要进一步明确。在Webpack4中,压缩资源(尤其是JavaScript)可以通过以下方式实现:1.**设置mode为&#39;production&#39;**:这会自动启用许多优化措施,包括压缩JS代码。2.**使用UglifyJsPlugin**:虽然Webpack4在生产模式下默认使用TerserWebpackPlugin(因为UglifyJsPlugin不支持ES6+),但引用[1]中提到了UglifyJsPlugin,所以我们可以使用它,但需要注意它可能不适用于ES6+代码。对于ES6+代码,建议使用TerserWebpackPlugin。然而,根据Webpack4的文档,生产模式下默认使用TerserWebpackPlugin进行压缩。所以,我们通常不需要显式配置它。但如果需要自定义配置,可以这样做:```javascriptconstTerserPlugin=require(&#39;terser-webpack-plugin&#39;);module.exports={mode:&#39;production&#39;,optimization:{minimizer:[newTerserPlugin({//这里可以指定TerserPlugin的配置选项}),],},};```对于CSS压缩,可以使用`optimize-css-assets-webpack-plugin`。同时,为了不破坏生产模式下的默认优化,我们需要在配置`optimization.minimizer`时同时指定JS和CSS的压缩器。综合以上,以下是一个配置示例,同时压缩JS和CSS:```javascriptconstTerserPlugin=require(&#39;terser-webpack-plugin&#39;);constOptimizeCSSAssetsPlugin=require(&#39;optimize-css-assets-webpack-plugin&#39;);module.exports={mode:&#39;production&#39;,optimization:{minimizer:[newTerserPlugin({//可以传递Terser的配置选项parallel:true,//使用多进程并行运行来提高构建速度terserOptions:{ecma:5,compress:{warnings:false,drop_console:true,//移除console},output:{comments:false,//移除注释}}}),newOptimizeCSSAssetsPlugin({})]},//其他配置...};```注意:在Webpack4中,如果你自定义了`optimization.minimizer`,那么Webpack将不再使用默认的压缩器,因此我们需要同时配置JS和CSS的压缩。另外,对于其他资源(如图片),可以使用`image-webpack-loader`在加载时进行压缩。配置示例:```javascriptmodule.exports={module:{rules:[{test:/\.(png|jpe?g|gif|svg)$/,use:[{loader:&#39;file-loader&#39;,options:{name:&#39;[name].[ext]&#39;,outputPath:&#39;images/&#39;}},{loader:&#39;image-webpack-loader&#39;,options:{mozjpeg:{progressive:true,quality:65},optipng:{enabled:false,},pngquant:{quality:[0.65,0.90],speed:4},gifsicle:{interlaced:false,},webp:{quality:75}}}]}]}};```总结Webpack4中配置资源压缩的方法:1.**JavaScript压缩**:通过设置`mode:&#39;production&#39;`启用默认压缩,或使用`TerserPlugin`自定义配置。2.**CSS压缩**:使用`optimize-css-assets-webpack-plugin`。3.**图片压缩**:使用`image-webpack-loader`。请根据项目需要选择合适的压缩工具和配置。§§相关问题§§1.在Webpack4中,如何压缩CSS文件?2.如何配置Webpack来压缩图片资源?3.使用`TerserPlugin`时有哪些常用的配置选项?</think>在 Webpack 4 中配置资源压缩主要通过以下方法实现,结合生产模式默认优化和自定义插件配置: ### 1. 启用生产模式(核心方法) ```javascript module.exports = { mode: &#39;production&#39;, // 关键配置 // 其他配置... } ``` **效果**: - 自动启用 JS 压缩(使用 TerserWebpackPlugin) - 启用 CSS 压缩(通过 CSSNano) - 启用作用域提升(Scope Hoisting) - 启用 Tree Shaking 移除未使用代码[^1] ### 2. 自定义 JavaScript 压缩配置 ```javascript const TerserPlugin = require(&#39;terser-webpack-plugin&#39;); module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: true, // 启用多进程压缩 extractComments: false, // 不提取注释到单独文件 terserOptions: { compress: { drop_console: true // 移除所有 console 语句 }, output: { comments: false // 移除所有注释 } } }) ] } } ``` ### 3. CSS 资源压缩配置 ```javascript const CssMinimizerPlugin = require(&#39;css-minimizer-webpack-plugin&#39;); module.exports = { optimization: { minimizer: [ new CssMinimizerPlugin({ minimizerOptions: { preset: [ &#39;default&#39;, { discardComments: { removeAll: true } } // 移除所有 CSS 注释 ] } }) ] } } ``` ### 4. 图片资源压缩配置 ```javascript module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: &#39;file-loader&#39;, options: { name: &#39;img/[name].[ext]&#39; } }, { loader: &#39;image-webpack-loader&#39;, options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.90], speed: 4 }, gifsicle: { interlaced: false } } } ] } ] } } ``` ### 完整配置示例 ```javascript const TerserPlugin = require(&#39;terser-webpack-plugin&#39;); const CssMinimizerPlugin = require(&#39;css-minimizer-webpack-plugin&#39;); module.exports = { mode: &#39;production&#39;, devtool: &#39;source-map&#39;, optimization: { minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { compress: { drop_console: true }, format: { comments: false } } }), new CssMinimizerPlugin() ] }, module: { rules: [ { test: /\.css$/, use: [&#39;style-loader&#39;, &#39;css-loader&#39;] }, { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: &#39;file-loader&#39;, options: { outputPath: &#39;images/&#39; } }, { loader: &#39;image-webpack-loader&#39; } ] } ] } }; ``` **注意事项**: 1. 生产模式下默认启用压缩,自定义配置会覆盖默认行为 2. 使用 `devtool: &#39;source-map&#39;` 在压缩时生成 source map[^1] 3. 图片压缩需配合 `image-webpack-loader` 4. 确保安装所需依赖: ```bash npm install terser-webpack-plugin css-minimizer-webpack-plugin image-webpack-loader --save-dev ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值