带你了解webpack

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

webpack作用：

是一个静态模块打包工具，分析、压缩、打包代码。

• 支持所有类型文件的打包
• 支持less/sass=>css
• 支持ES6/7/8=>ES5(降级兼容性)
• 压缩代码，提高加载速度

webpack安装

0. 初始化包环境yarn init -y
1. 安装依赖包yarn add webpack webpack-cli -D开发依赖
2. 配置script（自定义命令）

项目名不能有中文/大写/空格等特殊字符

文件夹不要和webpack同名

webpack配置修改

0. 新建webpack.config.js

1. 填入配置（common.js语法{ES5})

   • 入口（entey）可以是相对路径
   • 出口必须是绝对路径

2. 配置自定义命令：

 "scripts":{
     "build":webpack
 }

使用步骤

webpack打包css文件

• import '路径'只导入，不接受任何导出的东西，一般只需要执行目标文件代码，不用导入其内部成员的使用
• 下载：yarn add css-loader style-loader -D

 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 ​
 module.exports = {
   entry: './src/main.js',
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js'
   },
   plugins: [
     new HtmlWebpackPlugin({
       // 设置 html 路径
       template: './public/index.html'
     })
   ],
   module: {
     rules: [
       {
         test: /.css$/i,
         use: ['style-loader', 'css-loader']
       }
     ]
   }
 }

语法降级

1. 作用：解决语法ES6不兼容一些浏览器的问题，通过webpack进行降级为兼容性语法。

1. 下载：yarn add babel-loader @babel/core @babel/preset-env -D

2. 事例：

    const path = require('path')
    ​
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {//js降级配置
            test: /.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
      }
    }
   

   \