系统学习webpack的第一天

1.为什么需要构建工具

2.为什么选择webpack

3.环境搭建：安装webpack

//1.初始化的搭建
mkdir my-project  //创建文件夹
cd my-project  //进入文件夹
npm init -y  //初始化信息
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
//2.安装webpack
npm install webpack webpack-cli --save-dev
//3.查看是否安装成功
./node_modules/.bin/webpack -v
//将出现以下版本信息
webpack-cli 4.2.0
webpack 5.9.0
//说明安装成功了

4.配置一个简单的webpack

webpack的默认配置文件为 webpack.config.js
在根目录下面创建一个webpack.config.js文件，输入以下内容：

'use strict'
//单入口配置
const path = require("path")

module.exports = {
  entry:"./src/index.js" ,  //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'bundle.js'
  }, //出口文件
  mode:'production'
}

根目录下创建文件夹src并且在src中创建index.js
在控制命令中输入：

./node_modules/.bin/webpack

webpack将会自动打包到出口中dist文件夹中的bundle.js文件中

5.如何简单的命令进行打包呢

需要在package.json中进行软配置

在package.json中的srcipts里面写入
"scripts"：{
"build":"webpack"
}

在控制命令中直接输入npm run build 即可进行自动打包

6.多入口配置

'use strict'

const path = require("path")

module.exports = {
//多入口文件的entry要写成对象，其中以键值对形式进行存储
  entry:{
    index:"./src/index.js",
    search:"./src/search.js"
  },
  //出口文件不能写死，要给每个文件一个独立的名字[name].js
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].js'
  },
  mode:'production'
}

7.webpack核心概念之entry,output,loaders,plugins和mode

entry—入口文件，分为单入口文件和多入口文件
output —出口文件
loaders —解析的模块
常见的loaders有：

• babel-loader 转换ES6,ES7等新特性语法
• css-loader 支持.css文件的加载和解析
• less-loader 将less文件转换成css
• ts-loader 将ts文件转换成js文件
• file-loader 进行图片，字体等的打包
• raw-loader 将文件以字符串的形式进行导入
• thread-loader 各进程打包js和css

plugins —插件，可以在webpack打包的任何时候使用
常见的plugins有：

• CommonsChunkPlugin 将chunks相同的模块代码提取成公共js
• CleanWebpackPlugin 清理构建目录
• ExtractTextWebpackPlugin 将css从bundle文件里提取成一个独立的css文件
• CopyWebpackPlugin 将文件或文件夹拷贝到构建的输出目录
• HtmlWebpackPlugin 创建html文件去承载输出的bundle
• UglifyjsWebpackPlugin 压缩js
• ZipWebpackPlugin 将打包出的资源生成一个zip包

mode —用来指定当前的构建环境是：production（默认值），development，none
设置mode可以使用webpack内置的函数

附几张笔记~~

继续学习~如有错误请告知