copy-webpack-plugin 拷贝和压缩文件

不说废话,直接上代码,实现拷贝和压缩

  1. 安装依赖包(npm、yarn安装均可)
    1.1 yarn add copy-webpack-plugin -D
    1.2 yarn add uglify-es -D
    1.3 yarn add clean-css -D

webpack配置文件添加如下写法

const CopyWebpackPlugin = require('copy-webpack-plugin')
const Uglify = require('uglify-es')
const CleanCSS = require('clean-css')

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
	      {
	        from: path.join(__dirname,'../','src/images/'),//从哪里拷贝
	        to: 'images' //拷贝到哪里去,想压缩图片的可自行琢磨
	      },
	      {
	        from: path.join(__dirname,'../','src/css/'),
	        to: 'css',
	        transform: function (content) {
	          return new CleanCSS({}).minify(content).styles //压缩css文件
	        }
	      },
	      {
	        from: path.join(__dirname,'../','src/js/'),
	        to: 'js',
	        transform: function (content) {
	          return Uglify.minify(content.toString()).code //压缩js文件
	        }
	      }
	    ])
	]
}

注意:

由于是老项目,不得已采用这种压缩js、css的方法;常规优化、压缩还是在入口中引入文件,用loader出处理。

你可能感兴趣的:(webpack)