webpack的初级配置

1.项目基本的文件夹

2.各文件夹的简单介绍

• 运行指令

开发环境：

webpack ./src/index.js -o ./build/built.js --mode=development
webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js整体打包环境，是开发环境，所以不会压缩代码

生成环境：

webpack ./src/index.js -o ./build/built.js --mode=production
webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js整体打包环境，是生产环境，会进行压缩代码减少体积大小

• 结论：
  1. 未使用插件的webpack能处理js/json资源，不能打包处理css/img等其他资源（需要借助插件才行）
  2. 生产环境和开发环境都能将es6模块化编译成浏览器能识别的模块化
  3. 生产环境比开发环境多了一个压缩js代码

  webpack.config.js是webpack的配置文件
    作用：指示webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）
    所有的构建工具都是基于nodejs平台运行的~模块化默认采用common.js(common.js可以百度一下啥意思)
// webpack.config.js

const path =require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
//帮我把js自动引入到html文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//帮我把dist文件夹里残留的上次打包的文件清空
module.exports={
//webpack配置 五大核心先搭建好

//mode 模式生产模式和开发模式
	mode:'development',//开发模式一般使用的是开发模式，不会压缩代码比较好浏览代码
	// mode: "production",
// 入口起点
	entry:{
		path.resolve(__dirname,'../src/main.js'),  //需打包的入口文件
		path.resolve(__dirname,'../src/header.js'),  //需打包的入口文件
	}
// 输出口（输出的名称和目录文件 打包后的文件放在哪里）
	output: {
        filename: '[name].[hash:8].js',      // 打包后的文件名称
        // __dirname node.js的变量，代表当前文件的目录（绝对路径来着）
        path: path.resolve(__dirname,'../dist')  // 打包后的文件放在哪个目录下
    },
// plugins 插件 功能强大
	plugins:[
		new HtmlWebpackPlugin({
			// 功能：默认会创建一个空的html把打包好的js文件自动的引入到你指引的html中
		template:path.resolve(__dirname,'../public/index.html'),
	//复制这个路径的“path.resolve(__dirname,'../public/index.html')”文件的标签结构
			filename:"index.html",  // 复制后的文件名称
			chunks:['main'] // 与入口文件对应的模块名，打包后的js文件名称开头
		}),
		new HtmlWebpackPlugin({
		template:path.resolve(__dirname,'../public/header.html')
			filename:"header.html",
			chunks:['header']
		}),
		new CleanWebpackPlugin() 帮我把dist文件夹里残留的上次打包的文件清空
	],
	 // loader的配置
	module:{
      rules:[
        {
        // 匹配哪些文件(使用正则来表示条件)
        // use数组中xx-loader执行顺序：从右到左，从下到上 依次执行
          test:/\.css$/,
        //  style-loader创建style标签，将js中的样式资源插入进去，拼接好添加到head标签中去
        // css-loader将css文件变成common.js模块加载js中，里面内容如是样式字符串

          use:['style-loader','css-loader']
        },
        {
          test:/\.less$/,
          use:['style-loader','css-loader',{
			  loader:'postcss-loader',
                options:{
                    plugins:[require('autoprefixer')]
                }
		  }
		  // 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀
		  ,'less-loader'] // 从右向左解析原则
        }
      ]
    }
}

这时候我们发现css通过style标签的方式添加到了html文件中，但是如果样式文件很多，全部添加到html中，难免显得混乱。这时候我们想用把css拆分出来用外链的形式引入css文件怎么做呢？这时候我们就需要借助插件来帮助我们

拆分css

npm i -D mini-css-extract-plugin
webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件

配置文件如下

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  //...省略其他配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
           MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[hash].css",
        chunkFilename: "[id].css",
    })
  ]
}

拆分多个css

这里需要说的细一点,上面我们所用到的mini-css-extract-plugin会将所有的css样式合并为一个css文件。如果你想拆分为一一对应的多个css文件,我们需要使用到extract-text-webpack-plugin，而目前mini-css-extract-plugin还不支持此功能。我们需要安装@next版本的extract-text-webpack-plugin

npm i -D extract-text-webpack-plugin@next

// webpack.config.js
const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
let indexLess = new ExtractTextWebpackPlugin('index.less');
let indexCss = new ExtractTextWebpackPlugin('index.css');
module.exports = {
    module:{
      rules:[
        {
          test:/\.css$/,
          use: indexCss.extract({
            use: ['css-loader']
          })
        },
        {
          test:/\.less$/,
          use: indexLess.extract({
            use: ['css-loader','less-loader']
          })
        }
      ]
    },
    plugins:[
      indexLess,
      indexCss
    ]
}

打包 图片、字体、媒体、等文件

• file-loader
  就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中
• url-loader
  一般与file-loader搭配使用，功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件移动到输出的目录中

// webpack.config.js
module.exports = {
  // 省略其它配置 ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  }
}

用babel转义js文件

为了使我们的js代码兼容更多的环境我们需要安装依赖
npm i babel-loader @babel/preset-env @babel/core

注意
babel-loader与babel-core的版本对应关系
babel-loader 8.x 对应babel-core 7.x
babel-loader 7.x 对应babel-core 6.x
配置如下

// webpack.config.js
module.exports = {
    // 省略其它配置 ...
    module:{
        rules:[
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            },
            exclude:/node_modules/
          },
       ]
    }
}

上面的babel-loader只会将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换 例如(promise、Generator、Set、Maps、Proxy等)
此时我们需要借助babel-polyfill来帮助我们转换

npm i @babel/polyfill

// webpack.config.js
const path = require('path')
module.exports = {
    entry: ["@babel/polyfill",path.resolve(__dirname,'../src/index.js')],    // 入口文件
}
var foo = 'bar';