如何快速生成一个webpack新项目

快速生成一个webpack新项目

一.准备工作

windowns10系统

安装node

安装vscode软件

二.配置文件

1.打开vscode,建立项目根目录myproduct

在myproduct下面建立两个平行文件夹src和dist与一个webpack.config.js文件

目录结构为:

product-01
|-- dist                //压缩后的文件存储文件夹
|-- src                 //源码文件夹
|--webpack.config.js    //webpack配置文件

webpack.config.js文件示例源码如下:

module.exports = {
    mode : 'development'    //development(开发时的配置)   production(开发结束后的配置)
}

2.在src文件中建立两个文件index.html和index.js

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>
</head>
<body>
    <h1>这是入口文件</h1>
</body>
</html>

console.log('你在浏览器中按F12就可以看见我')

3.安装依赖包

在根目录下打开终端(或在电脑项目根目录处打开cmd)
运行npm init -y快速初始化项目
在生成的package.json中将description填一填,
在生成的package.json添加"private": true命令(这个命令的意思是项目声明为私有,不加这一条有可能会报错)

package.json文件源码示例:

{
"name": "product-01",
"version": "1.0.0",
"description": "这是一个描述文件,是用来描述项目的,怎么写都行,根据公司业务来",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2"
}
}
在终端运行npm install webpack webpack-cli -D,安装这两个包,安装后可能会报错,这个错完全不用理,原因可参考https://blog.csdn.net/weixin_39690767/article/details/80025538

报错的代码如下

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
然后在终端输入命令webpack可以在dist文件夹中看到一个多余的main.js,这个文件就是被压缩过的入口文件

最终的目录结构为

product-01
|-- dist
|---- main.js
|-- src
|---- index.html
|---- index.js
|-- package-lock.json
|-- package.json
|--webpack.config.js

如何快速生成一个webpack新项目

猜你喜欢