14、webpack的基本使用

1、webpack

Webpack 就是一个前端资源加载/打包工具。

它的作用是将多种静态资源 js、css、less 转换打包成一个或多个 bundle，减少页面请求，优化性能。比如把多个JS打包成一个JS文件，把多个CSS文件打包到一个CSS文件，这样的话就不用一个个来导入。

Webpack 有5个关键核心点：

1、entry：它是导入模块和库的入口起点

2、output：告诉 webpack 在哪里输出它所创建的 bundles

3、loader：处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）打包起来，比如说CSS和图片等，需要转换才能打包

4、plugins：用来处理各种各样的任务，比如自动生成html文件，清除dist目录的插件等等。

5、modle：打包模式，development是没有压缩的，production是压缩的

2、webpack的基本打包配置

• 1、初始化：yarn init -y
  
• 2、安装依赖包：yarn add webpack webpack-cli -D
  
• 3、到package.json文件中配置scripts：
  

  "scripts": {
    "build":"webpack --config webpack.config.js"
  }

4、配置webpack.config.js文件：

const path = require('path');
module.exports = {
  // 1、entry入口
  entry: './src/index.js',
  //   2、output出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 3、mode模式，development是没有压缩的，production是压缩的
  mode: 'development',
};

5、打包：yarm build

如果是vue打包的话，可以利用vue-cli脚手架自动生成webpack配置，然后npm run build打包即可

3、导入（require）多个js文件打包成一个bundle.js

// 导入case1
require('../public/js/case1.js')
// 导入jquery
const $ = require('jquery')
$(function () {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'black')
});

4、自动生成html文件（html-webpack-plugin）

1、安装：yarn add html-webpack-plugin -D

2、引入自动生成html的插件：const HtmlWebpackPlugin = require('html-webpack-plugin');

3、配置：plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]

作用：不需要手动引入bundle.js，插件帮你完成

5、加载css文件（css-loader）

• 1、安装loader转换器：yarn add style-loader css-loader -D
• 2、配置加载规则：

// 6、调用CSS文件，因为webpack只认识JSON和JS，所以需要配置loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

6、分离css文件（mini-css-extract-plugin）

1、安装：yarn add mini-css-extract-plugin -D

2、引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3、配置：loader: MiniCssExtractPlugin.loader

4、调用：new MiniCssExtractPlugin({ filename: 'css/index.css' })

7、加载less文件（less-loader）

• 1、安装：yarn add less less-loader -D
• 2、配置：

{
  test: /\.less$/,
  use: [
  {
    loader: MiniCssExtractPlugin.loader,
    options: { publicPath: '../' }
  }, 'css-loader', 'less-loader']
}

8、加载图片文件（url-loader）

• 1、安装：yarn add url-loader file-loader -D
• 2、配置：

 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }

9、清除dist目录的插件（clean-webpack-plugin）

1、安装：yarn add clean-webpack-plugin -D

2、导入：const { CleanWebpackPlugin } = require('clean-webpack-plugin');

3、调用：

 plugins: [
    // 自动生成html文件
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    // 分离css文件
    new MiniCssExtractPlugin({ filename: 'css/index.css' }),
    // 清除dist文件
    new CleanWebpackPlugin()
  ],