阮一峰教程webpack demo 练习合集 – webpack demo01

本文从零开始,逐步开始学习阮一峰老师的webpack demo教程。实现从0开始新建项目,到跑通整个demo小项目。逐渐加深对webpack的理解。

今天练习的是webpack demo01,主要是对Enter file的认识。

Enter file:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

想要了解更多关于babel-loader的信息,请移步webpack官网。想要下载阮一峰老师的整个webpack demo项目,请移步阮一峰gitHub仓库。

1、新建webpack-demo01项目文件夹
打开cmd切换到该目录下

2、执行初始化操作
npm init -y

3、安装webpack
npm install webpack webpack-cli –save-dev

4、修改package.json配置
添加”build”: “webpack -p

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cli": "^1.0.1",
    "webpack": "^4.39.2"
  }
}

5、新建webpack.config.js文件

onst path = require('path')

module.exports = {
    entry: './main.js',
    output: {
        filename: "bundle.js",
        //更改bundle.js最终生成的路径,我这里选择让它生成在根目录下,默认会在dist文件中
        path: path.resolve(__dirname, './')
    }
}

6、新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bundle.js"></script>
</head>
<body>

</body>
</html>

7、新建main.js文件

document.write('<h1>hello word</h1>')

8、执行编译,运行npm run build命令,npm无报错,生成bundle.js文件

打开浏览器看效果,正常显示。

至此阮一峰老师的webpack demo01小例子已经成功跑通。

相关文章:
阮一峰教程webpack demo 练习合集 – webpack demo02
阮一峰教程webpack demo 练习合集 – webpack demo03

标签: