1、项目文件夹中创建各类型文件放置的文件夹，如：iTestingWeb文件夹下创建src dist文件夹，用途：src为源码 dist为生成后的文件放置位置，然后在源码文件夹中进一步按文件类型增加文件夹:css、js、images等文件夹

2、在src文件夹中创建一个入口index.html文件，vscode编译器使用快捷键：!+Tab方式快速创建html页面,并快捷创建一个测试代码：

3、继续在src中创建js的入口文件：main.js

4、由于会用到js文件，因此我们导入jquery：在终端中（项目文件夹）里首先运行：npm init 来初始化生成一个package.json，该文件有以下几个作用：

　　a、作为一个描述文件，来描述你的项目依赖了哪些包

　　b、允许使用“语义化”来指定项目依赖包的版本

　　c、更好的与其他开发者分享，便于重复使用

5、初始化npm后，开始安装依赖包：jquery：npm i jquery,安装成功后，项目文件会增加一个文件夹：node_modules来存放下来好的依赖包

6、不倡导直接在html中增加jquery的引入，因为会多一次请求，因此我们直接把jquery的引入封装到main.js入口js文件中：import $ form 'jquery'  ，逻辑为：从node_modules里到处jquery.js并赋值给前端用$来接收，以后的$就代表jquery。另：import 引入模式为es6的模块引入方式。

7、因为通过import方式所以传统的解析是不支持的，因此开始引入webpack，首先要安装webpack：

运行`npm i webpack -g`全局安装webpack，这样就能在全局使用webpack的命令

8、安装完后执行命令来实现webpack的打包：

webpack src/js/main.js dist/bundle.js.  该语句的意图是：把源码的main.js文件打包成支持所有兼容的bundle.js文件来供前端访问.

9、基本的发布已经搞定，现在要简化一下，不要每次输入  src/js/main.js dist/bundle.js. 这样的入口和出口地址部分，想直接输入webpack就可以直接打包：项目根目录中增加“webpack.config.js”配置文件,然后就可以执行简易的打包命令：webpcak即可

//这个配置文件，其实就是一个js文件，通过Node中的模块操作向外暴露一个配置对象，然后命令行通过webpack命令直接被执行
module.exports = {//配置文件中，需要手动指定入口和出口//入口entry: {//表示要使用的webpack打包哪个文件path: path.join(__dirname, './src/main.js'),},//出口output: {//指定打包好的文件输出到哪个目录里path: path.join(__dirname, './dist'),//指定输出文件的名称filename: 'bundle.js'}
}

10、接下来继续延伸：如果每次修改每次都在命令行中输入webpack也是烦躁的，我们可以通过另一个工具来简化：webpack-dev-server；注意：该工具安装必须依赖本地项目要存在webpack，就是说即使已经安全的全局的webpack，也需要在项目本地再安装一遍：npm i webpack -D ；安装webpack-dev-server命令为：npm i webpack-dev-server -D，安装完毕后，当直接在命令行执行webpack-dev-server命令的时候会出现错误，原因是因为webpack-dev-server不会全局，也不应该是全局，因此如果想支持这个工具，就需要在package.json配置文件中增加脚本快捷：scripts下增加：

{"name": "itestingweb","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production","start2": "webpack-dev-server --open --port 3000  --contentBase src --hot","start": "webpack-dev-server --open"},"author": "","license": "ISC","dependencies": {"jquery": "^3.3.1"},"devDependencies": {"clean-webpack-plugin": "^0.1.19","css-loader": "^1.0.0","html-webpack-plugin": "^3.2.0","style-loader": "^0.21.0","webpack": "^4.16.4","webpack-cli": "^3.1.0","webpack-command": "^0.4.1","webpack-dev-server": "^3.1.5"}
}

这样只要执行：npm run start就可以运行工具。后面的“--open”表示的是执行命令后直接打开浏览器，安装完开发者环境后，如何才能实现修改后页面自动更新？这就需要一个热更新插件：

devServer: {//contentBase: './dist',// 设置服务器访问的基本目录contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径// 设置服务器的ip地址,可以是localhosthost: 'localhost',// 设置端口port: 8090,// 设置自动拉起浏览器open: true,// 设置热更新hot: true}

11、目前我们可以知道bundle.js是根据webpack-dev-server这个工具将其放在了缓存中，那么是否可以将html页面也放进去？答案是肯定的，这就需要借助一个插件来实现：html-webpack-plugin ，安装命令：npm i html-webpack-plugin -D,安装好后，需要在webpack.config.js里增加配置,先导入插件

const htmlWebpackplugin = require('html-webpack-plugin');

，再在plugins里new出对象：

const path = require('path')
const htmlWebpackplugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');//这个配置文件，其实就是一个js文件，通过Node中的模块操作向外暴露一个配置对象，然后命令行通过webpack命令直接被执行
module.exports = {//配置文件中，需要手动指定入口和出口//入口entry: {//表示要使用的webpack打包哪个文件path: path.join(__dirname, './src/main.js'),},//出口output: {//指定打包好的文件输出到哪个目录里path: path.join(__dirname, './dist'),//指定输出文件的名称filename: 'bundle.js'},plugins: [new webpack.NamedModulesPlugin(),//new一个热更新的模块对象（步骤：1、devServer增加配置 2、引用webpack对象（const webpack = require('webpack') 3、插件数组中 new一个热启动对象 ））new webpack.HotModuleReplacementPlugin(),new htmlWebpackplugin({title: 'Output Management',template: path.join(__dirname,'./src/index.html'),filename:'index.html'})],devServer: {//contentBase: './dist',// 设置服务器访问的基本目录contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径// 设置服务器的ip地址,可以是localhosthost: 'localhost',// 设置端口port: 8090,// 设置自动拉起浏览器open: true,// 设置热更新hot: true},devtool: 'inline-source-map',//用于配置所有的第三方模块加载器module:{rules:[//配置处理.css文件的第三方loader规则{test:/\.css$/,use:['style-loader','css-loader']},]}
}

然后执行 npm run start就会自动将页面放在缓存里了，当使用了html-webpack-plugin这个插件后，就不再需要我们再手动处理js的引用了，因为这个插件已经帮我们创建了一个合适的script，并且引用了正确的访问路径，此时在html页面我们会看到：

<script type="text/javascript" src="bundle.js"></script>

这行代码。

12、此时基本的页面已经出来了，那么我们如何增加样式资源呢？

　　这就需要增加样式文件及其引用来处理：在css文件夹里增加一个index.css文件，比如要删除每行记录前面的点：

li{list-style: none;
}

然后在入口js里增加css的资源引用：import './css/index.css'，此时我们支持npm run start会出现错误，那是因为我们缺少两个工具：'style-loader','css-loader'，如何增加：

1、先npm i style-loader -D; npm i css-loader -D

2、再在webpack.config.js里增加配置：

//用于配置所有的第三方模块加载器module:{rules:[//配置处理.css文件的第三方loader规则{test:/\.css$/,use:['style-loader','css-loader']},]}}

注意：此配置中test后面的处理是依据正则表达式来进行.css文件识别的，并且：在工具加载的时候步骤是先css-loader再style-loader的从右向左的顺序执行工具加载。当加载完style-loader后，再将加载后的工具加载到webpack中用来打到调用。

13、

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass