webpack 模板的新项目:
时间: 2023-08-31 22:14:09 浏览: 138
如果你想使用 webpack 来创建一个新项目,可以按照以下步骤:
1. 创建一个新的项目目录,并进入该目录:
```
mkdir my-webpack-project
cd my-webpack-project
```
2. 初始化 npm 项目:
```
npm init -y
```
3. 安装 webpack 和 webpack-cli:
```
npm install webpack webpack-cli --save-dev
```
4. 创建一个名为 `src` 的目录,并在其中创建一个 `index.js` 文件:
```
mkdir src
touch src/index.js
```
5. 在 `index.js` 文件中编写一些代码,作为项目的入口文件。
6. 创建一个名为 `dist` 的目录,用于存放 webpack 打包后的代码:
```
mkdir dist
```
7. 创建一个名为 `webpack.config.js` 的文件,用于配置 webpack:
```
touch webpack.config.js
```
8. 在 `webpack.config.js` 文件中编写配置代码,例如:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```
9. 在 `package.json` 文件的 `scripts` 字段中添加一个 `"build"` 脚本,用于运行 webpack:
```json
{
"name": "my-webpack-project",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0"
}
}
```
10. 运行 `npm run build` 命令,webpack 将会打包你的代码并输出到 `dist/bundle.js` 文件中。
至此,你已经成功地创建了一个基于 webpack 的新项目。
阅读全文