从零开始搭建自己的 webpack 配置

安装

建议项目本地安装 webpackwebpack-cli

1
2
npm install --save-dev webpack
npm install --save-dev webpack@<version>

v4 版本之后需要安装 CLI

npm install --save-dev webpack-cli

全局安装只要将 --save-dev 改成 --global 即可。

项目初始化

初始化

  1. mkdir demo && cd demo
  2. npm install --save-dev webpack
  3. npm install --save-dev webpack-cli

初始化之后的 package.json :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "demo",
"version": "1.0.0",
"description": "my webpack configuration",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "gccll.love",
"license": "ISC"
}
  • 去掉 "main" 属性

  • 增加项目私有属性

    1
    2
    3
    4
    5
    6
    7
    {
    "name": "demo",
    "version": "1.0.0",
    "description": "my webpack configuration",
    "private": true,
    // ...
    }

创建 bundle

让源代码和打包之后的文件和代码分离开。

源码路径: src/
打包之后的路径: dist/

npm install --save : 将要被打包进包里的模块;

npm install --save-dev : 仅开发阶段使用,不会打包到最后生成的代码中。

打包初试

在创建 src, dist 目录之后,新建 src/index.js 作为入口文件,在没有配置的情况下,

默认就是这个文件,打包之后默认生成 dist/main.js

打包输出:

➜ npx webpack
Hash: ed3d8a959e4961265f23
Version: webpack 4.29.6
Time: 434ms
Built at: 04/04/2019 7:12:39 PM
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 195 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这里用到的是 npx 命令(更多:阮一峰 npx, npm npx)。

  1. 默认入口: src/index.js
  2. 默认出口: dist/main.js

使用配置文件

默认配置文件: webpack.config.js

本文标题:从零开始搭建自己的 webpack 配置

文章作者:ZhiCheng Lee

发布时间:2019年04月22日 - 16:01:45

最后更新:2019年06月16日 - 20:26:13

原始链接:http://blog.gcl666.com/2019/04/22/webpack-init-practise/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%