概念

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle, webpack是高度可配置的，基于四个核心概念

入口 (entry)
输出 (output)
laoder
插件 (plugins)

为了方便去理解，我们先去新建一个项目，一步步的开始上手webpack

新建一个空项目
当前项目下打开 git bash
执行如下命令，初始化一下项目

yarn init -y
yarn add webpack webpack-cli --dev // 引入webpack以及webpack-cli， 因为webpack生产环境是不需要用的，所以--dev

项目初始化之后就可以开始写点代码了
首先建立一个index.html，/src/index.js, /src/data.js， /src/style.css，在index.html中引入index.js
data.js是用来存储数据的

export function getMockData(){
  const mockData = ['jack','rose','xiaoMing']
  return mockData
}

index.js用于处理数据，我们就用data.js里的数据来生成一个列表

import { getMockData } from "./data"
import './style.css'

const mockData = getMockData()

const ulNode = document.createElement('ul')

mockData.forEach(item=>{
  const liNode = document.createElement('li')
  liNode.innerText = item
  ulNode.appendChild(liNode)
})

document.body.appendChild(ulNode)

style.css 随便写点样式

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  width: 600px;
  height: 400px;
  box-shadow: 0 0 5px 0 #ccc;
  margin: 50px auto 0;
  border-radius: 10px;
}

li{
  font-size: 16px;
  color: #666;
  padding: 12px 16px;
  list-style: none;
}

在index.js中我们可以看到， css样式是通过 import 引入的，在打包的时候就会报错，webpack 在处理一些其他格式的文件时，需要借助loader来打包，这里处理css的时候我们需要安装一些loader，执行如下执行安装

yarn add css-loader style-loader --dev

基本准备好了之后就可以开始配置webpack了
我们在根目录下新建一个 webpack.config.js , webpack 使用的是nodejs的语法，所以会nodejs的话会比较好理解

const path = require('path') // 引入path

module.exports = {
  mode: 'development',  // mode， 默认是development， 即开发环境， 可针对这个字段打包不同的环境变量
  entry: './src/index.js',  // 入口，一般是根文件，在cli里面一般是main.js 
  output: {  // 输出，一般配置打包出的文件
    filename: 'dist.js',
    path: path.resolve(__dirname, 'dist')
  },
// loader配置， 下面是配置的cssloader
  module: {
    //laoder 规则配置
    rules: [
      {
        test: /\.css$/i, // 接受一个正则，用于匹配文件
        use: ['style-loader', 'css-loader'] // 这是我们安装的 loader， 
      }
    ]
  }
}

看到这里相信对入口，输出， loader，基本作用都理解了，接下来我们执行打包

npx webpack

此时我们可以看到项目下生成了dist打包文件，我们去index.html 去引入dist下面的dist.js，打开看看页面，此时就能看到打包的效果了，但是我们打包直接修改index.html中的文件引入这样很不方便，此时我们可以借助一个插件来解决一下这问题，首先安装一下

yarn add html-webpack-plugin --dev

安装好了之后我们去webpack.config.js引入配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 引入

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'dist.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [new HtmlWebpackPlugin()],  // 调用，new一个实例即可
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.jpg$/i,
        type: "asset/resourse"
      }
    ]
  }
}

那么插件也引入调用了，接下来我们去直接一下 npx webpack 此时，打包目录下就多了个index.html 文件了。那么也就是我们插件使用成功了
此时，你已经简单的上手webpack了，更多配置可以点此查阅官网 webpack

快速上手webpack

概念

你可能感兴趣的:(快速上手webpack)