从零开始搭建自己的 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 : 仅开发阶段使用,不会打包到最后生成的代码中。

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

文章作者:ZhiCheng Lee

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

最后更新:2019年04月22日 - 16:01:45

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

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

0%