使用webpack4压缩js文件和css文件以及image图片（超详细）

webpack

• 查看 webpack官方文档，了解更多配置
• 前端自动化构建工具 gulp webpack grunt (vue/cli create-react-app)
• webpack的功能 按照依赖关系 将代码进行合并打包

安装webpack

前提条件

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
创建项目后要进行初始化

 npm init

本地安装

 npm install webpack -g   全局安装 
 npm install webpack     在项目中安装
 npm install webpack@<version>  在项目中安装并指定版本

推荐选择在项目中安装 因为每个项目需要的版本可能不一样
如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install webpack-cli

压缩js文件

webpack配置文件

在根目录创建一个webpack.config.js文件
单入口单出口配置文件
下面举个单入口单出口的栗子🌰，(而且将封装一个传入相对路径返回绝对路径的函数，用来写出口的绝对路径)

const path  = require('path')
// 传入相对路径 输出绝对路径 的函数
function resove(pathName){
  // 传入一个相对路径返回一个绝对路径
  // webpack 所在的路径
  return  path.join(__dirname,pathName)
}
// 单入口单出口
module.exports = {
  entry: './hehe/index.js', // 需要编译压缩的入口文件路径
  output:{
    path:resove('./haha'),// 打包结束后的文件 存放路径（输入的是相对于webpack的路径）
    filename:'main.js'//打包结束后的文件 的文件名
  },
  mode:'production' //或者'development' //指定打包编译的模式 开发还是线上
};

如果缺少path包可以npm install path安装一下
上面就是一个简单的单入口单出口的配置文件
多入口多出口配置文件
也可以同时压缩多个js，分别提取，也就是多入口多出口

const path  = require('path')
function resove(pathName){
  // 传入一个相对路径返回一个绝对路径
  // 都是相对于webpack 所在的路径
  return  path.join(__dirname,pathName)
}
// 多入口 多出口
module.exports={
  entry:{
      oooo:resove('./js/index.js'),
      xixi:resove('./js/son1.js'),
      haha:resove('./js/son2.js')
  },
  output:{
    path:resove('./dist'),//放到当前目录下的dist中
    filename:'[name]_[hash].js' //name对应的入口文件的key值 hash防止读取缓存文件
  },
  mode:'development'
}

配置package.json

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack" 
  },

当在终端中写npm run dev时 会先去package.json中找dev发现是webpack的命令，然后会先看一下当前目录下有没有webpack.config.js文件 如果有就会在这个文件中找入口找出口 如果没有配置文件 就会走默认项
默认项就是指当前目录下有没有src 有的话就打包到dist目录里
但是这种配置方式只能将webpack.config.js放在根目录下 这样才可以通过npm run dev执行到
==》指定运行目录 webpack --config=‘执行路径’ //读取一个指定的配置文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config=./demo1/webpack.config.js"//执行指定目录下的webpack.config.js文件
    //"dev": "webpack" //默认运行根目录的webpack.config.js
  },
  

注意：webpack会将有依赖的打包到一个文件中，加入在index.js文件中import导入了son1.js那么会将son1.js也打包压缩到同一个出口文件中

压缩css文件和image图片

压缩css文件需要下载一些插件

npm install mini-css-extract-plugin     //提取css到单独文件的插件
npm install optimize-css-assets-webpack-plugin  //压缩css插件
npm install css-loader  //使用 loader 告诉 webpack 加载 CSS 文件
npm install style-loader
npm install file-loader  //加载图片的插件

然后需要在入口的要压缩js文件中import导入需要压缩的css文件

 import index2 from './index2.css'

然后配置webpack.config.js文件

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 1.导入安装插件包
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


function resove(pathName) {
    // 传入一个相对路径返回一个绝对路径
    // webpack 所在的路径
    return path.join(__dirname, pathName)
}
module.exports = {
    entry: "./css/index1.js",
    output: {
        filename: 'main1.js',
        path: resove('./dist')
    },
    mode: 'production',
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name][hash].css',
            chunkFilename: '[id][hash].css'
        }),
        new OptimizeCSSAssetsPlugin()
    ],
};

这时再在终端npm run dev就可以压缩css文件
注意：如果css文件中有引用图片的路径（例如背景图片的url），那么要保证这些路径上的图片也在，这样就会将图片也进行压缩，并系统会将压缩后引用名字也都修改，这是压缩图片的一种方法
也可以在js文件中import导入需要压缩的图片，那么图片也会被压缩。
如果并不想将css文件中的引用的图片也压缩，只是单纯的想压缩掉空格，那么可以直接百度搜索css在线压缩，就可以找到，我用的是https://www.jb51.net/tools/cssyasuo.shtml，这个直接就可以压缩Css代码