前端项目构建——webpack

1 概述

webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

作用

• 处理JS文件的依赖关系
• 处理JS文件的兼容问题

2 使用

目录结构

• webpack-demo
  • dist
    • bundle.js(打包后生成)
  • src
    • main.js
    • main.html
  • package.json(初始化后生成)
  • webpack.config.js(配置文件)

2.1 全局打包

整体步骤：

• 安装：npm i webpack webpack-cli -g
• 初始化：npm init -y
• 打包
• 引入：在main.html文件中引入bundle.js文件
  <script src="../dist/bundle.js"></script>
• 查看：浏览main.html文件可看到样式

1.完整打包命令：

• 打包：webpack ./src/main.js(打包文件地址) -o ./dist/bundle.js(输出文件地址)

2.简化打包命令：(上述打包命令太长，通过配置简化打包命令)

• 配置：创建webpack.config.js文件进行配置

	const path = require('path');
    module.exports = {
    
    
        //入口
        entry:path.join(__dirname,'./src/main.js'),
        //出口
        output:{
    
    
            //输出路径
            path:path.join(__dirname,'./dist'),
            //打包后的文件名称
            filename:'bundle.js'
        }
    };

• 打包：webpack

2.2 本地打包

• 安装：npm i webpack webpack-cli -D
• 初始化：npm init -y

1.手动打包

• 配置：

  • 创建wbpack.config.js文件进行配置

    	const path = require('path');
        module.exports = {
            
            
            //入口
            entry:path.join(__dirname,'./src/main.js'),
            //出口
            output:{
            
            
                //输出路径
                path:path.join(__dirname,'./dist'),
                //打包后的文件名称
                filename:'bundle.js'
            }
        };
    

  • 在package.json文件中配置
    注意：冒号之前的名称可以根据项目需要命名，json文件中不可以写注释，会提示错误.

    {
            
            
      "scripts": {
            
            
        "webpack": "webpack"
      }
    }
    

• 打包：npm run webpack

2.自动打包

• 安装：npm i webpack-dev-server -D(自动打包编译工具)
• 配置

  • 在package.json文件中配置

    {
            
            
      "scripts": {
            
            
        "dev": "webpack-dev-server"
      }
    }
    

    参数说明：

    • open:自动打开浏览器
    • port:自动设置端口
    • contentBase：内容根路径
    • hot:启用热更新

    参数的配置：

    • 第一种：直接在package.json文件中直接配置

      {
                
                
        "scripts": {
                
                
             "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
           }
      }
      

    • 第二种:在webpack.config.js文件中配置

        //1.引入webpack
        const webpack = require('webpack');
        module.exports = {
                
                
            devServer:{
                
                
                open:true,//自动打开浏览器
                port:3000,//端口
                contentBase:'src',//托管根目录
                hot:true//hot比较麻烦，需要三步：3.启用热更新
            },
            plugins:[
                //2.new一个热更新的模块对象
                new webpack.HotModuleReplacementPlugin()
            ]
        };
      

• 打包：npm run dev
  • 以后每一次只要保存，就会自动打包，不需要我们手动打包
  • 将整个项目以一个localhost服务器方式运行起来，可以用 http://localhost:端口访问
• 引入：<script src="/bundle.js"></script>
  • 手动打包：bundle.js是在dist目录下
  • 自动打包：bundle.js是在根目录下(原因：webpack-dev-server打包的bundle.js存储在电脑内存中，没有存储在物理磁盘上，以一种虚拟的方式托管到根目录，看不见这个bundle.js文件)

2.3 整合统一

从上述自动打包我们可知，bundle.js存储在内存中，HTML在物理路径中，为了统一，使用插件html-webpack-plugin，将HTML也放入内存中，同时在main.html页面中也不需要引入物理磁盘上的bundle.js文件，html-webpack-plugin会自动将打包好的bundle.js文件追加到页面中

• 安装：cnpm i html-webpack-plugin -D
• 配置：在webpack.config.js中

  //导入HTML插件
  const htmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
        
        
  	plugins:[
  		//创建一个在内存中生成HTML页面的插件
  		new htmlWebpackPlugin({
        
        
  			//指定模板页面，根据指定的页面路径，生成内存中的页面
  			template:path.join(__dirname,'./src/main.html'),
  			//指定生成页面的名称
  			filename:'main.html'
  		})
  	]
  }
  

• 打包：npm run dev

3 loader

webpack默认只能打包js文件，无法处理非js文件,如果要处理非js文件需要手动安装第三方loader加载器

• 安装
  • .css:cnpm i style-loader css-loader -D
  • .less:cnpm i less-loader less -D
  • .scss:cnpm i sass-loader node-sass -D
  • url:cnpm i url-loader file-loader -D(背景图片的使用：background:url(’’) )
  • 字体图标：npm i bootstrap -S / cnpm i font-awesome -S
• 配置：在webpack.config.js文件中

  module.exports = {
        
        
      module:{
        
        
          //配置所有的第三方加载器
          rules :[//匹配规则
              {
        
        test:/\.css$/,use:['style-loader','css-loader']},
              {
        
        test:/\.less$/,use:['style-loader','css-loader','less-loader']},
              {
        
        test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
             /* 
             处理图片参数：
             	第一个：limit(给定的值是图片的大小，单位是byte)
  	            图片大小<limit的值，不会转为base64格式字符串
  	            图片大小>=limit的值，会转为base64格式字符串
  	         第二个：name：name=[hash:6]-[name].[ext]
  	         前面有6为hash值(原本32位)-图片原本的名称.图片原本的后缀名
              */
              {
        
        test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=89796&name=[hash:8]-[name].[ext]'},
              //字体图标后缀名
              {
        
        test:/\.(eot|ttf|svg|woff|woff2)$/,use:'url-loader'}
          ]
      }
  };
  

• 引入：在main.js文件中(ES6语法)
  • 文件的引入：import '文件地址'
  • 包的引入：import *** from '***'

4 ES6

在webpack中默认只能处理一部分ES6语法，更高级的语法不能处理，要处理需要借助第三方loader(Babel)，将高级语法转换成低级语法，再去交给webpack打包，比如面向对象编程

• 安装
  • cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
  • cnpm i babel-preset-env babel-preset-stage-0 -D
• 配置：
  • 在webpack.config.js文件中

    module.exports = {
            
            
        module:{
            
            
            //配置所有的第三方加载器
            rules :[//匹配规则
                {
            
            test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
            ]
        }
    };
    

  • 新建.babelrc文件配置

    {
      "presets":["env","stage-0"],
      "plugins":["transform-runtime"]
    }
    

  • 在main.js中：

     class Person {
            
            
         //static可以定义静态属性，可以用类名直接访问
         static user= {
            
            id:1,name:'cxk'}
     }
     //访问静态属性
     console.log(Person.user);