[JavaScript知识库]webpack的入门配置

webpack 默认识别js文件， 可以使用 CommonJs （模块化开发）语法 ， 也可以使用 es6 （模块化开发）的语法

webpack的基础配置

安装webpack和webpack-cli插件

npm init -y
npm i webpack webpack-cli --save-dev

配置启动命令

在package.json 文件的scripts 字段中配置启动命令（打包命令）, 配置一个开发环境development，一个生产环境production

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
  },

搭建项目的结构

在 项目的根目录下 创建一个src文件夹， 在该文件夹下创建一个 index.js 文件 作为默认的入口文件，

• src
  • index.js

运行命令

命令是二选一 ； 运行命令后，自动生成dist文件夹， 文件夹下会有一个默认的main.js文件，这就是打包编译后生成的产物

npm  run dev // 开发
npm run build  // 生产

webpack的配置文件 webpack.config.js

webpack 默认处理js文件，如果想要处理其他的文件或者实现其他的功能，需要借助于插件或者loader

webpack的入口

1. 单个入口； 可以指定入口文件名

module.exports = {
  entry:'./src/index.js'  
}

2. 多个入口， 合并成一个文件输出

module.exports = {
  entry:['./src/index.js', './src/list.js', ...]
}

3. 多入口配置 对应多个出口， 每个输出的文件必须有唯一的标识名
   对象的 key 就是输出文件的名字

module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  }
}

webpack的出口

1. 单一出口 或者 多个入口， 合并成一个文件输出

const path = require('path')
module.exports = {
  //  入口配置方式1
  entry:'./src/index.js' ,
  //  入口配置方式2 
  entry:['./src/index.js', './src/list.js', ...]
 
  // 配置出口
  output:{
    //  path 属性 配置 输出文件的目录  dist 存放文件的文件夹 名（可以自定义，但是通常使用都是dist）
    path:path.resolve(__dirname, 'dist')
    //  filename 属性 配置的 是输出文件名和路径（放到指定的文件夹下）
    // filename:'demo.js'
    filename:'js/demo.js'
  }
}

2. 多出口的配置

const path = require('path')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js'
  }
}

webpack的插件

常用插件：

• clean-webpack-plugin 清理目录

• html-webpack-plugin 通过模板html文件生成出口含有外链式的html文件

• mini-css-extract-plugin css样式

插件使用的常规步骤

1. 下载安装插件
2. 在 webpack.config.js 文件中引入
3. 在 plugins 字段中进行配置

自动管理 dist 文件夹

使用 clean-webpack-plugin 插件 ;

//  1 下载
npm i  clean-webpack-plugin  --save-dev

在 webpack.config.js 文件中引入 并进行配置

//  高版本引入方式
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//  低版本直接引入
// const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins:[
    new CleanWebpackPlugin()
  ]
}

2 使用webpack内置的配置项管理dist文件夹

const path = require('path')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js',
    //  通过 webpack的内置配置项 output.clean 管理dist文件夹
    clean:true
  }
}

自动生成html 文件

使用html-webpack-plugin插件

npm i html-webpack-plugin --save-dev

在webpack.config.js中引入配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js'
  },

  plugins:[
    //  生成默认项
    // new HtmlWebpackPlugin()   
    //  进行先关的配置  单页面配置
   /*  new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'url',
      //  filename: 生成的文件名 可以自定义
      filename:'demo.html'
    })   */

    //  多页面配置
    new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'./src/index.html',
      //  filename: 生成的文件名 可以自定义
      filename:'index.html',
      //  指定引入的js文件 ， 数组中的值 和 enrty 的key 进行映射
      chunks:['index']
    }),
    new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'./src/news.html',
      //  filename: 生成的文件名 可以自定义
      filename:'news.html',
      chunks:['app']
    })  


  ]
}

配置的模板Html在dist文件中会映射为带有引入出口js文件的文件

webpack的loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。（tip：相当于将html文件中所有引入的文件统一管理，因为在模板Html中引入文件的路径和在出口html文件不一样）

webpack的loader 需要下载， 不用引入，直接在 webpack.config.js的module下rules下test和user字段中进行配置

常用loader:

• file-loader

• url-loader

• css-loader

• sass-loader

• style-loader

• babel:将es6转为es5
  "@babel/core": "^7.13.14",
  "@babel/plugin-transform-runtime": "^7.13.10",
  "@babel/preset-env": "^7.13.12",
  "babel-loader": "^8.2.2",
  

处理不同的文件是通过正则匹配不同的后缀实现的。

处理css文件

在js入口文件中将css文件作为模块导入

import './css/demo.css'

在配置文件中需要使用style-loader 和 css-loader

const path = require('path')
module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'index.js'
  },
  module:{
    rules:[
      // 每个对象就是一个loader的配置
      {
        test:/\.css$/,
        use:['style-loader', 'css-loader']
      }
    ]
  },
  plugins:[
    
  ]
}

处理sass文件

入口文件引入同css

module:{
    rules:[{
        test:/\.scss|sass$/,
        use:['style-loader', 'css-loader','sass-loader']//注意顺序
    }]
}

处理图片

入口文件引入同css

module:{      
    rules:[{
            test:/\.jpg|jpeg|png|gif|webp$/, //这里可能需要将webp放最后，放前边报错
            use:[{
                    loader:'url-loader',
                    options:{
                        // 限定文件大小 ：如果资源小于指定的值，则自动转换为base64编码格式，如果大于指定的值，则正常显示
                        limit:1024,
                        //  name 属性 配置 输出文件的路径和名字
                        name:'image/[name].[ext]'
                    }
                }]
        }]
}

es6转es5

module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        //  webpack 默认采用es6 语法生成打包文件
        environment:{
            //   The environment supports arrow functions ('() => { ... }')
            arrowFunction:false // 不使用箭头函数
        }

    },
    module:{
        rules:[
            {
                test:/\.js$/,
                //  不匹配 node_modules中的文件
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                  }
            }
        ]
    }
}