1.webpack是一个打包工具，对于目前单页面的流行以及web app的兴起，webpack打包显得极为流行，他可以将我们的多个js文件打包成单个js静态文件，这样给我们带来了极大的方便
使的我们不需要一次性把10个js都引入到页面中，这是一个极大的性能优化
2.webpack他是根据模块的依赖关系进行静态分析，并根据相应的规则生成静态文件
3.webpack4.x之后增加了很多新的规范，使的项目更合理，比如引入了入口文件entry均为src文件夹下的index.js，出口文件为dist文件夹下的main.js，出口文件为dist文件夹下的main
4.打包命令统一为webpack --mode development或者webpack --mode production
5.如果想要多个文件进行打包，那需要将其他文件与index.js形成依赖关系
6.webpack自带只支持打包js文件，如果要打包css就需要添加一个loader
1.先初始化一下项目让项目具备一个package.json 初始化npm init
2.安装loader：npm install css-loader style-loader
3.把css文件引入到页面中直接使用reqire('!style-loader!css-loader!./style.css');因为css文件是静态文件，所以引入方式有些差别
7.安装webpack命令npm install webpack -g还需要单独安装webpack cli命令npm install webpack-cli -g
8.多个js文件打包，需要让多个js文件之间形成依赖关系，然后通过require('文件路径');加载到index.js中，正常都是加载一个json
9.把其他文件的要依赖的内容扩展出去使用命令module.exports = "hehe"也可以扩展出去一个jsonmodule.exports = json;在index.js中接收使用require('路径');
10.nodejs使用的js规范是commonjs规范
11.es6模块规范
暴露：export default {}
引入：import A from '/path'
12.commonjs模块规范
暴露方法1：exports.sum = function(){}
暴露方法2：向外暴露一个构造函数
function Hello(){
var name;
this.setName = function(mname){
name = mname;
}
this.sayHello = function(){
console.log('Hello' + name);
}
}
module.exports = Hello;
引入：var sum = require('/path')
引入：var Hello = require('/path')
让一个项目可以使用webpack进行打包管理
0.npm install --save-dev webpack安装webpack
1.初始化该项目使之产生package.json文件
2.webpack4中默认不需要进行配置就可以对项目进行打包，打包命令统一为webpack --mode development或者webpack --mode production
2.1.webpack较新版本打包命令npx webpack默认是开发环境打包
3.打包配置为webpack默认配置，也可以自己修改，打包前系统会进行检测webpack.config.js里面的配置信息，进行相应的打包
4.webpack4还需要单独安装webpack cli命令npm install webpack-cli -g
5.webpack4默认的打包起始入口文件是./src/index.js
6.打包后的文件目录是./dist/main.js
webpack配置文件webpack.config.js说明
默认入口./src/index.js
默认出口./dist/main.js
默认打包环境development
配置文件书写
var path = require('path');//node中路径管理模块
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'bundle'),
filename: 'bundle.js'
},
plugins:[
new HTMLWebpackPlugin({
templete:'./src/html'//指定打包模板，也就是要打包的html
其他参数可以进行操作html的title，压缩，等等
})
]
};
使用npx webpack 或者 webpack --mode development 或者 webpack --mode production进行打包都是实实在在生成一次文件
这样效率是很低的，所有应该在内存中打包，就需要使用webpack中开发服务器配置
0.npm install webpack-cli -D 局部环境的cli
1.npm install webpack-dev-server -D
2.使用npx webpack-dev-server
webpack插件处理HTML，打包指定的html文件并引入打包后的js引入到html中
1.npm install html-webpack-plugin -D
2.这个是插件，如果要使用就需要使用node的方法引入此插件
let HTMLWebpackPlugin = require('html-webpack-plugin')
3.在plugins中配置