带你了解webpack

webpack作用：

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

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

webpack安装

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

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

文件夹不要和webpack同名

webpack配置修改

1. 新建webpack.config.js
2. 填入配置（common.js语法{ES5})
   • 入口（entey）可以是相对路径
   • 出口必须是绝对路径
3. 配置自定义命令：

"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进行降级为兼容性语法。

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

3. 事例：

   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']
             }
           }
         }
       ]
     }
   }