欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

从0构建webpack开发环境(一) 一个简单webpack.config.js

程序员文章站 2022-08-08 19:57:00
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 在项目中安装webpack和webpack cli (webpack4.X需要) 紧接着在项目中创建三个文件 ,`dist/index.html webpack.config.js`, webpa ......

本文基于webpack4.x,使用的包管理工具是yarn

概念相关就不搬运了,直接开始

首先项目初始化

mkdir webpack-demo && cd webpack-demo
yarn init

在项目中安装webpack和webpack-cli(webpack4.x需要)

yarn add webpack webpack-cli --dev

紧接着在项目中创建三个文件src/index.js,dist/index.html,webpack.config.js
webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js') // 以src/index.js为项目入口
  },
  output: {
    filename: 'bundle.js',   //打包后的名称
    path: path.resolve(__dirname, 'dist')  //打包后的输出到该目录下
  }
}

src/index.js

import _ from 'lodash'

function createcomponent(tag) {
  let element = document.createelement(tag)

  element.innerhtml = _.join(['hello', 'webpack'], ', ')

  return element
}

document.body.append(createcomponent('div'))

index.js中引入的一个第三方库 lodash,所以需要安装 执行yarn add lodash

dist/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>webpack demo</title>
</head>
<body>
  
  <script src="./bundle.js"></script>
</body>
</html>

完成上述步骤后会得到以下项目目录,以index.js为入口,其中依赖于第三方库lodash, 打包输出到dist目录下,
可以看到在index.html中引入了同目录的bundle.js文件,但是现在还没有生成

从0构建webpack开发环境(一) 一个简单webpack.config.js

接着在package.json文件的scripts属性中添加以下语句块

"scripts":{
        "build": "webpack --config webpack.config.js"
    }

添加之后就可以通过 npm run build 或者 yarn build 命令执行打包, --config webpack.config.js表明webpack以该配置文件里的配置项进行打包,如不添加则会使用webpack默认的打包配置

然后执行 yarn build
从0构建webpack开发环境(一) 一个简单webpack.config.js
打包成功,同时dist文件夹下多了一个bundle.js文件,

在浏览器中打开index.html就会看到输出的信息
从0构建webpack开发环境(一) 一个简单webpack.config.js

到此,就成功完成了一个简单的webpack环境构建,然而这只是webpack的基础配置项 entryoutput。webpack本身只会识别js文件,
在实际开发中会有css,img,字体图标或者.vue,.jsx等文件,这些文件都可以以模块化的方式添加到项目中。但是这些文件webpack本身并不会识别,主要依赖于loader的解析。
同时文中还需要手动添加index.html文件,这个可以通过plugins进行自动创建html文件。

本篇章中涉及到的几个依赖包
从0构建webpack开发环境(一) 一个简单webpack.config.js