三、配置文件

2018-11-11  本文已影响0人  大侠叫谁

在前面介绍如何创建一个 bundle 文件时,我们直接在终端输入命令,打包了一个 bundle 文件,但是大多项目需要复杂的设置,若仍使用终端输入命令,会很麻烦页很难维护。此时,配置文件就显得尤为重要了。

我们在项目根目录下新建一个 webpack.config.js 配置文件。

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

**tips: **

更多具体配置我们在以后会讲到。
添加 npm 脚本

// package.json
"scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js"
  }

关于 npm 脚本,可以看看 npm scripts 使用指南
将 index.html 引入的就是文件换成我们打包指定输出的文件名 bundle.js。

// dist/index.html
<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

然后在终端运行 webpack 配置文件。

yarn run build

demo2

上一篇 下一篇

猜你喜欢

热点阅读