HTML开始创建路径的方法,webpack创建页面的过程

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

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

ul>li*10{这是第$个li}，实现10行测试数据快速生成

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”表示的是执行命令后直接打开浏览器，安装完开发者环境后，如何才能实现修改后页面自动更新？这就需要一个热更新插件：

HotModuleReplacementPlugin

该对象的使用步骤为：1、webpack.config.js增加开发者服务配置(devServer)：

devServer: {

//contentBase: './dist',

// 设置服务器访问的基本目录

contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径

// 设置服务器的ip地址,可以是localhost

host: 'localhost',

// 设置端口

port: 8090,

// 设置自动拉起浏览器

open: true,

// 设置热更新

hot: true

}

2、webpack.config.js引入webpack对象(因为热更方法在对象中)

const webpack = require('webpack');

3、插件配置中new一个热更新对象

new webpack.HotModuleReplacementPlugin(),

这样重新npm run start 就可以实现热更新了，只要服务开着 就不需要每次再做其他动作了。只管调整项目代码就好

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地址,可以是localhost

host: '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页面我们会看到：

这行代码。

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