webpack安装及基本使用

1.本地安装webpack—重点

操作步骤:
	1.初始化项目---注意:项目名不要使用webpack
    	npm init -y

    2.安装webpack和webpack-cli到开发依赖中 
		yarn add webpack@5.12.0 webpack-cli@4.5.0 -D

	#注意:一定要固定版本号,否则有很多bug
	

2.webpack基本使用过程—重点

步骤:
	1.在项目==根目录==中创建开发目录(src),放入指定前端代码
		src/js/index.js
		//入口文件
        const fn = (num1, num2) => {
            console.log(num1 + num2);
        }

        fn(10, 30)
	2.在项目==根目录==中创建webpack.config.js文件
		webpack.config.js

	3.配置webpack文件
      	--1.引入相关插件
        --2.暴露5大核心
        
        //webpack配置文件

        //1.引入相关模块
        //引入管理路径的模块
        let path = require('path');

        //2.导出(暴露)5大核心
        module.exports = {
            //1.entry 入口
            //单入口
            entry: './src/js/index.js',
            //2.output 出口
            output: {
                path: path.resolve(__dirname, 'dist'),// 会在项目根目录下自动生成dist目录 
                filename: 'bundle.js'// 打包好生成的文件名
            },
            //3.loader 加载器
            //4.plugins  插件
            //5.mode  模式
            mode: 'development'
        }
     4.修改package.json启动命令
			 "scripts": {
                "build": "webpack"
              },
	 5.启动打包---执行命令一定要在项目根目录  
     	npm run build  或 yarn build
        
     6.在页中引入相关打包好的文件即可---暂时引入,后期不用引 
      <!-- 暂时引入,主要为了看效果,后期不需引入js -->
      <script src="../../dist/bundle.js"></script>

3.loader基本使用–重点

步骤:
	1.下载加载器
    2.配置加载器 
    3.打包 

3.1 CSS加载器–了解

0.在入口文件中,引入样式 
	require('../less/box.css')
1.下载加载器
	yarn add style-loader css-loader -D

	style-loader:主要是在页面中生成 style标签并放入css-loader样式规则
    css-loader:	解析css规则 
2.配置加载器 
//加载器配置项
    module: {
        /*
            语法:
            //规则
              rules:[
                    可以写多个对象,每一个对象都是一条规则
                    {
                        test://,//找文件的后缀
                        use:[]//需要使用的加载器  顺序是从后往前
                    }
                ]  
        */
        rules: [
            //css加载器
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
              
            }
        ]
    },
3.打包 
	yarn build

3.2 less加载器-了解

1.创建less文件,在index.js中引入
	require('../less/index.less')
2.下载加载器
	yarn add less-loader less -D

3.配置
 {
     test: /\.less$/,  // 匹配所有.less文件
     use: [
       'style-loader', // 创建style标签 把css插入html的head内
       'css-loader', // 解析加载css到js中（把css打成字符串）。
       'less-loader', // 编译less为css
     ]
 }

4.打包

3.3 处理img

1)css中的img

1.在less中使用背景设置图像
div {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    background-image: url(../imgs/x2.jpg);

    p {
        color: green;

    }

}
	
2.下载加载器
	yarn add url-loader file-loader -D

3.配置
{
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',//配置单个加载器
    options: {//额外配置项
          name: '[hash:16].[ext]',  // 图片输出的名字hash长度16位 默认32位
          limit: 10 * 1024,  // 小于10kb base64处理  10kb以下进行base64打包,如果是以上打包为name配置的格式
            // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
           esModule: false, 
           outputPath: 'img' // 图片输出文件夹 
      }
}

4.打包

2)html中的img

1.在html中使用背景设置图像
	<img src="../imgs/x2.jpg" alt="">
	
2.下载加载器
	yarn add html-loader@1.3.2 html-webpack-plugin@4.5.0 -D
3.配置加载器
   {
      test: /\.html$/, // 处理html中引入img
      loader: 'html-loader'
   },
 4.配置插件:主要用于在dist中生成对应的html
 //1.引入插件--在webpack.config.js第一个部分引入
 	const HtmlWebpackPlugin = require('html-webpack-plugin') // 处理html的插件
    
 //2.在plugins中配置插件 
    plugins: [
    	/*
            语法: 
                new 插件名({配置项参数})
        */
        new HtmlWebpackPlugin({
            template: './src/pages/index.html',//设置需要打包的模块位置 
            filename: 'index.html'//输出到dist目录中的文件名
        })
  ]

5.修改出口公用地址
// 2. 出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出路径 必须是绝对路径
    filename: 'bundle.js',  // 输出的文件名
    publicPath: './', // 查找静态资源的路径
  },
    
6.不要在src的index.html进行打开,后期预览都使用dist目录中的html,并且不要引入script脚本
    <!-- 暂时引入,主要为了看效果,后期不需引入js -->
    <!-- <script src="../../dist/bundle.js"></script> -->

3)js中的img

//1.在html中添加
<!-- js中的img -->
    <img src="#" id="box" alt="">
      
//2.在index.js中引入js img
  //操作js中的img
let imgDom = document.querySelector('#box');

let imgUrl = require('../imgs/1.jpg');

//把图像地址设置到指定的img标签
imgDom.src = imgUrl

3.4 加载字体图标

//1.引入字体图标
	在js中引入字体图标的样式
    在html引入span的图标
    
//2.配置加载器
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,// 处理字体格式文件
      loader: 'file-loader',
      options: {
            name: '[hash:16].[ext]', // 输出名字
            outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
          }
    }

3.5编译es6到es5

1.下载加载器
	yarn add babel-core babel-loader@7.1.5 babel-preset-es2015 -D

3.配置
 {
        test: /\.js$/,
        loader: 'babel-loader',    // loader 编译es6为es5
        exclude: /node_modules/  // 排除
  }

4.在项目根目录 创建 .babelrc 文件, 内容如下
{
  "presets": [
      "es2015"
  ]
}

5.打包

4.webpack插件使用

步骤:
	html-webpack-plugin@4.5.0  // 打包html的插件。
    mini-css-extract-plugin // 提取css的插件（把css提取成为独立文件）。
    optimize-css-assets-webpack-plugin // 压缩css的插件


	#1.下载插件
    yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

    #2.引入插件
    let HtmlWebpackPlugin = require('html-webpack-plugin');//引入html插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入提取css插件
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//引入压缩css插件

    #3.配置插件
     module: {
        //规则
        /*
            语法:
            //规则
              rules:[
                    可以写多个对象,每一个对象都是一条规则
                    {
                        test://,//找文件的后缀
                        use:[]//需要使用的加载器  顺序是从后往前
                    }
                ]  
        
        */
        rules: [
            //css加载器
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,// 提取css
                    options: {
                        publicPath: '../'// 资源查找路径
                    }
                }, 'css-loader']
            },
            //less加载器
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,// 提取css
                    options: {
                        publicPath: '../'// 资源查找路径
                    }
                }, 'css-loader', 'less-loader']
            },
            //处理css中的img
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 10 * 1024,
                    esModule: false,
                    outputPath: 'img' // 图片输出文件夹 
                }
            },
            //处理html中的img
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            //字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,// 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //ES6转ES5
            {
                test: /\.js$/,
                loader: 'babel-loader',// loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }
        ]
    },
    //4.plugins  插件
    plugins: [
        /*
            语法: 
                new 插件名({配置项参数})
        */
        new HtmlWebpackPlugin({
            template: './src/pages/index.html',//设置需要打包的模块位置 
            filename: 'index.html'
        }),
        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({// 提取css
            filename: 'css/[name].css'// 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin()// 压缩css
    ],
    

5.开发服务安装–理解

1.下载服务器
	yarn add webpack-dev-server -D
2.在webpack.config.js中添加一个新模块
	devServer: {
      contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
      compress: true, // 启动gzip
      port: 666,  // 端口
      open: true, // 自动打开服务
      publicPath: '/', // 静态资源查找路径
      openPage: 'index.html', // 打开的页面
    },
    target: 'web', // 目标是浏览器
      
 3.修改package.json启动命令
      	"scripts": {
            "build": "webpack",
            "serve": "webpack serve"
          },
            
  4.启动服务器
  	yarn serve