webpack | 1基础配置-entry和output

_Halcyon
128 阅读2分钟

这几年一直对webpack的认知很碎片化，这段时间在系统的学习webpack。遂本文适合于和楼主一样对想要系统学习webpack的初级开发盆友们，建议可以跟着敲一边代码实操一下~大佬们直接可以当没看到啦。

介绍

webpack是一个JavaScript 应用程序的静态模块打包工具，把各种类型的模块打包成js

image.png

webpack只识别js和json，所以对于其他类型的模块来打包时需要先转化为webpack能识别的js或json。

基础使用

新建一个工程，同时新建基础文件src/index.js，执行npm init -y初始化。

image.png

安装

cnpm install webpack webpack-cli --save-dev
  • webpack 打包工具
  • webpack-cli 用来在命令行中运行 webpack 的工具
  • --save-dev 等同于-D，表示只添加开发依赖

编写配置

1.新建webpack.config.js配置文件，写入内容：

// webpack.config.js
const path = require("path")

module.exports = {
    entry: './src/index.js',
    output: {
        // 指的是当前文件所在目录下的dist目录
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
}

entry表示webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

entry的默认值是./src/index.js，可以通过配置entry属性，来指定一个（或多个）不同的入口起点。

output表示打包后输出文件的配置信息，在path中可以配置打包后的文件要写入哪个文件夹下（常见dist），filename的值表示最终输出的js的名称。

2.在src/index.js写测试内容

// src/index.js
console.log('build test')

3.修改package.json，配置build命令:

{
    "name": "webpack",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": { 
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "description": "",
    "devDependencies": {
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0" 
    } 
}

执行npm run build命令，打包成功

image.png

引入样式文件

src下新建index.css文件，写入样式，在index.js中引入样式文件

// src/index.css

body {
    background-color: green;
}

// src/index.js

import './index.css'

执行npm run build命令打包，会发现报了下面的错误

image.png

可以看到，一个警告是没有指定mode，另一个错误是说识别不了css，需要loader处理，因为webpack只识别json和js，其他形式都不识别，所以需要一个loader来转换。详情见下篇文章

avatar
文章
阅读
粉丝