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

时间 2019-11-24

标签构建 webpack 开发环境一个简单 webpack.config.js config 栏目 JavaScript 繁體版

原文原文链接

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

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

首先项目初始化html

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

在项目中安装webpack和webpack-cli(webpack4.X须要)vue

yarn add webpack webpack-cli --dev

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

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.jsweb

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 lodashnpm

dist/index.htmljson

<!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文件，可是如今尚未生成浏览器

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

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

添加以后就能够经过 npm run build 或者 yarn build 命令执行打包, --config webpack.config.js代表webpack以该配置文件里的配置项进行打包，如不添加则会使用webpack默认的打包配置模块化

而后执行 yarn build

打包成功，同时dist文件夹下多了一个bundle.js文件,

在浏览器中打开index.html就会看到输出的信息

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

本篇章中涉及到的几个依赖包

下一篇从0构建webpack开发环境(二) 添加css,img的模块化支持