标签：目的 esc 注意 文件内容 content 开发 doc app code
手动创建myapp，或mkdir myapp
可以在此步骤中填写一些项目信息，也可以在第5步骤完成后填写
package.json文件：
{
"name": "myapp",//项目名称
"version": "1.0.0",//项目版本号
"description": "startApp about books",//项目说明描述
"main": "index.js",//主文件（入口文件）
"scripts": {//指定一系列指令
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ada",//作者
"license": "ISC"//许可证
}
package.json文件是关于配置的一些说明，包括：
使用了 --save-dev 表示在开发环境中使用
安装完webapck会创建一个node_modules 文件夹，用来存放npm命令安装的软件，同时package.json 文件会记录该项目的元信息，以及一些依赖包信息等。
*注意：当前练习使用3版本webpack，4版本需要安装webpack-cli
创建一个index.html存放页面内容，放到 dist/ 目录下，创建一个index.js入口文件，放到 src/ 目录下。目录结构大概如下：
├── dist
│ └── index.html
├── node_modules
├── package.json
└── src
└── index.js
PS: 所谓入口文件就是从这个文件中引入的资源都会被Webpack统一打包处理，无论它是图片资源，样式资源，还是JS资源。Webpack会根据配置对不同类型的资源文件进行不同方式的处理。
使页面文件index.html和入口文件index.js关联
webpack.config.js文件内容大致如下：
const path = require(‘path‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
filename: ‘bundle.js‘,
path: path.resolve( __dirname , ‘dist‘ )
}
}
在窗口输入 webpack 回车，则编译并打包相应的文件，当前的目录结构大致如下：
.
├── dist
│ ├── bundle.js
│ └── index.html
├── node_modules
├── package.json
├── src
│ └── index.js
└── webpack.config.js
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
*注意： 以上10个步骤结束，一个基本的项目已经构建完成
npm install --save-dev webpack-dev-server
module.exports = {
.....
devServer: {
contentBase: ‘./dist‘,
watchContentBase: true
},
};
*注意： 完成以上步骤后，就可以进行基本的开发了，修改文件可实现页面自动刷新，之后有需要什么依赖和加载器可以按需安装并配置即可
标签：目的 esc 注意 文件内容 content 开发 doc app code
原文地址：https://www.cnblogs.com/zhaoxiaoying/p/8995752.html
