【webpack】webpack4入门--entry、output

webpack是构建应用的打包工具，webpack将各个模块之间的依赖关系进行整理输出，官网的图片就已经很形象的说明这个道理。
在这里插入图片描述
我们通过实际动手来入门webpack

新建一个项目，用命令行npm init --yes初始化package.json文件。
创建一个config文件夹，再创建一个webpack.dev.js文件，该文件用于webpack的配置。
新建一个show.js，敲上代码

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
 window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

再新建一个main.js作为主入口文件

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

新建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>Document</title>
 <script src="./dist/app-bundle.js"></script>
</head>
<body>
 <div id="app">app</div>
</body>
</html>

我们用命令行安装webpack的依赖，webpack4中除了要安装webpack还要安装webpack-cli。
npm install webpack webpack-cli
一切就绪，我们看一下目录结构

.
├── config
├── index.html
├── main.js
├── node_modules
├── package-lock.json
├── package.json
└── show.js

接下来我们要进行webpack的配置了。
在webpack中我们必须要设置入口（entry）和出口（output），其次我们设置好模式（mode），否则在打包时会有警告。

const path = require('path')

module.exports = {
  
  entry: {
    app: path.resolve(__dirname, '../main.js')
  },
	//通过路径解决到main.js
  mode: "development",		//开发模式

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name]-bundle.js'
  }
  //output里path必须设置，
  //filename为打包文件名，[name]映射为entry的键名
  //这里输出打包完是app-bundle.js
}

配置好webpack.dev.js文件后，我们用命令行进行打包
webpack --config=config/webpack.dev.js
–config表示标识符，代表webpack的配置，后面跟着的是配置文件所在的目录。

Hash: e6edbe28fb8104c525ef
Version: webpack 4.29.6
Time: 151ms
Built at: 2019-03-14 09:24:12
        Asset      Size  Chunks             Chunk Names
app-bundle.js  4.28 KiB     app  [emitted]  app
Entrypoint app = app-bundle.js
[./main.js] 93 bytes {app} [built]
[./show.js] 180 bytes {app} [built]

接着终端输出打包信息

为了以后打包方便，我们可以将打包命令配置到package.json文件scripts里，如

  "scripts": {
    "build": "webpack --config=config/webpack.dev.js"
  },

这样我们可以用npm run build直接执行我们的打包命令了。

对于单页应用，entry可以用对象形式配置多个入口，如官网提供给我们的

entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
}

这样我们将一些第三方库打包放在vendors中，主代码文件放在app中。

entry也可以传入一个数组

entry: [ './main.js', './vendors.js']  // 这将两个文件一起打包到同一个文件中

【webpack】webpack4入门--entry、output

猜你喜欢