webpack 之 webpack.config.js配置详解

/**
 * 生成package.json: npm init
 * 需要安装的包:npm install webpack webpack-cli style-loader css-loader less-loader sass-loader url-loader file-loader html-loader html-webpack-plugin webpack-dev-server -D
 *
 * webpack的配置文件
 * 作用：指示webpack 干哪些活（当运行指令时会加载里面的配置）
 * 默认采用 common.js
 * 
 * loader :1.下载  2.使用（配置loader）
 * plugins: 1. 下载 2.引入 3.使用
 *  */

 //resolve用来拼接绝对路径的方法
 const { resolve } = require('path');
 const HTMLWebpackPlugin =require('html-webpack-plugin')

 module.exports ={
   //入口
   entry:'./src/index.js',
   //输出
   output: {
     //输出文件名
     filename:'js/build.js',
     //输出路径
     //__dirname node.js的变量，代表当前文件的绝对路径
     path:resolve(__dirname,'build')
   },
   //loader的配置
   module:{
     rules: [
      //详细的load配置
      {
        //匹配哪些文件
        test:/\.css$/,
        use: [
          //use数组中loader执行顺序：从右到左，从下到上 依次执行
          //创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          //将CSS文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
        ]
      },
      {
        //匹配哪些文件
        test:/\.less$/,
        use: [
          //use数组中loader执行顺序：从右到左，从下到上 依次执行
          //创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          //将CSS文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
          //将less文件转为css文件
          'less-loader'
        ]
      },
      {
        //匹配哪些文件
        test:/\.(jpg|png|gif)$/,
        //安装 url-loader file-loader
        loader:'url-loader',
        options: {
          //图片大小小于8kb,就会被base64处理
          //优点：减少请求数量，减轻服务器压力
          //缺点：图片体积会更大，文件请求速度更慢。
          limit:8*1024,
          //url-loader默认使用ES6模块化解析，而html-loader引入图片时commonjs
          //解析时会出问题：[object Moudle]
          //解决：关闭url-loader的ES6模块化，使用commonjs解析
          esModule:false,
          //给图片重命名
          //[hash:10]取图片hash的前十位
          //[ext]取文件原来的扩展名
          name:'[hash:10].[ext]',
outputPath:'imgs'//配置输出路径
        }
      },
 {//匹配其他文件

　　　　　　exclude:/\.(css|html|js|jpg|png|gif|less|sass)$/,

loader:'file-loader',

options:{

name:'[hash:10].[ext]',

　　　　　　　　outputPath:'media'//配置输出文件夹

}

　　   }，
      {
        //处理html文件的img图片
        test:/\.html$/,
        loader:'html-loader'
      },
     ]
   },
   plugin: [
     //详细的plugin配置
     new HTMLWebpackPlugin({
       //复制 ./src/index.html 文件，并自动引入打包输出所有资源（JS/CSS）
       template: './src/index.html'
     })
   ],
   //模式
   mode: 'development',
  //  mode: 'production',
  //开发服务器 devServer:用来自动化(自动编译,自动打开浏览器，自动刷新浏览器~~~)
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为：webpack-dev-server
  devServer:{
    contentBase:resolve(__dirname,'build'),//自动构建目录，打包后的文件夹绝对路径
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  }
 }

在package.json配置启动脚本，原来启动命令是npx webpack-dev-server，配置后通过npm run dev 也可启动

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