Webpack

01 Mar 2021 2288字 8分

webpack

基本概念
1. webpack是一个打包器，作用是把前端模块编译成浏览器能够识别的HTML+CSS+JS
2. 在webpack中一切皆为模块
3. webpack的四个入门核心概念：entry、output、loaders、plugins
4. 基本作用：构建开发环境、上线打包
基本使用
1. npm install webpack -g
2. npm install webpack-cli -g
3. 项目安装 -D
4. webpack –config 文件名 ,打包时指定webpack的配置文件

webpack.config.js文件配置

const path = require('path')
  
// 这个配置文件，是给webpack使用的
// 代码语法，node代码、commonJS模块引入规范
module.exports = {
  // 打包模式：development开发模式，production生产模式
  mode: "development",
  // 默认的入口为src/index.js
  entry: path.join(__dirname, './src/main.js'),
  // 默认的出口文件为./dist
  output: {
    // 打包文件名
    filename: 'bundle.[hash].js', // 生成带hash值的文件名
    // 打包生成的文件夹路径
    path: path.join(__dirname, './dist')
  }
}

webpack-dev-server（创建本地服务）

npm install webpack-dev-server -D（建议全局安装）

配置devServer

devServer: {
    // 指定本地服务的端口号
    port: 8090,
    // 自动打开浏览器
    open: true,
    // 开启热更新 实际上创建了一个客户端到node服务的webSocket长连接(发布订阅模式)
    hot: true,
    // 指定本地服务的静态资源目录
    contentBase: './public'
  }

webpack serve –config webpack.config.js 创建本地服务（nodejs构建静态资源服务器的原理）
public文件夹下的index.html文件正常显示，但 js文件引入有问题

plugins（插件）
1. html-webpack-plugin 将入口文件和静态资源文件夹中的index.html结合起来，js文件正常加载（模块化引入）
2. clean-webpack-plugin 每次打包自动删除 ./dist文件夹

区分本地生产环境还是打包

npm install cross-env -D

// 本地开发环境和打包时进行字段区分 build为打包，serve为本地开发环境
"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack serve --open --config webpack.config.js",
  },

获取定义的字段值：process.env.NODE_ENV
判断字段值是否为开发环境如果是开发环境给config增加开发环境配置

loaders（model）所有需要加载的文件都需要于主入口文件有直接或者间接的关系，loader才能起作用

module: {
    // 用于定义各种模块的处理和编译的方案
    rules: [
      // 当我们再打包或启动本地服务时，遇到 .jpg结尾的模块，就用file-loader来进行加载、编译
      {
        test: /\.(jpg|png|jpeg)$/,
        use: ['file-loader']
      },
      // 执行打包或本地服务是，遇到 .css模块时，先使用css-loader加载css文件，然后style-loader将css样式代码注入到html结构中
      {
        test: /\.css$/,
   use: ['style-loader', 'css-loader']
      },
      // 遇到 .scss文件时，sass-loadeer先加载scss文件,交给sass处理器把scss文件编译成css文件，css-loader加载sass编译好的css文件，style-loader将css注入html
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader']
      },
      // 遇到 .js文件时，使用babel-loader加载 .js文件,交给babel编译器（@babel/core,@babel/preset-env）来编译成ES5
      // @babel/core    babel的核心代码，必须安装
      // @babel/preset-env    它是一个具体的babel编译器，作用是把ES6代码编译成ES5
      // 在使用babel时，一定要在项目根目录添加一个 babel.config.js文件，用于指定babel编译js的编译细节
      {
        test: /\.js$/,
        use: ['babel-loader']
      }
    ]
  }

babel.config.js 文件配置

// 使用babel 安装 babel-loader @babel/core  @babel/preset-env 
     
// babel编译器的配置文件，用于更加精细 的指定js的编译细节
     
// presets用于指定当前环境中使用的js主版本
// plugins用于指定特殊js语法的编译
module.exports = {
  presets: ["@babel/preset-env"],
  plugins: []
}

使用eslint
1. 安装 eslint eslint-webpack-plugin

Webpack DforDream

webpack