webpack的功能特点
1.代码转换 2.文件优化 3.代码分割 4.模块合并 5.自动刷新 6.代码校验 7.自动发布
webpack依赖如下两个模块
ES5 module 模块:
引入:import
导出:export
common Js模块:
引入:require
导出:exports
webpack使用的是npm方式进行引入，导出
首先需要创建一个目录src,新建两个js文件。
第一步:
1.通过命令初始化一个package.json文件
npm init -y
2.通过命令安装webpack依赖和脚手架
npm install webpack webpack-cli -D
把webpack安装到本地项目里面，不全局安装
第二步:多个文件打包成一个文件
需要创建 src文件目录
需要创建 index.js (所有js入口)
需要创建 sum.js (模块js)
需要创建 index.html(主页)
sum.js:（模块js文件无论如果有多少，都必须用该方法导出，在引入统一js内）
定义方法/导出方法
function sum(a,b){
return a+b;
}
export default sum;
index.js:
import sum from ‘./sum.js’ //引入组件js
console.log(sum(10,20)) //调用
npm 版本 5.12后可以通过 npx webpack 零配置直接打包。
但是这不是我们需要的。所以我们需要自己配置打包命令
只要通过node_modules找到bin下的webpack打包命令就可以进行打包。
配置如下:
package.json >>
scripts:
一般我们项目分为两个环境开发环境和生产环境，我们打包也要区分开来
//生产环境配置:
“build”:“webpack --mode production”
//开发环境配置:
“dev”:“webpack --mode development”
以上命令配置完就可以进行不同环境的打包命令了
生产环境打包命令:npm run build
开发环境打包命令:npm run dev
这个时候打包完成，我们会发现，项目的根目录里面生成了一个dist的文件，dist目录下生成了一个 main.js的文件，
这就代表我们的js文件，打包成功为一个文件了。
但此时我们需要自己手动去把main.js通过script标签引入到index.html 这个就很麻烦，还好。webpack为我们提供了
一个便捷的插件----------html-webpack-plugin，它是用来生成html文件的。方法如下:
（该插件一般用于开发环境下）
该插件也需要通过命令行安装:
安装到生产环境下: npm install html-webpack-plugin
检查package.json文件该字段,dependencies代表生产环境下,以下说明生产环境安装成功
“dependencies”: {
“html-webpack-plugin”: “^3.2.0”,
},
安装到开发环境下: npm install html-webpack-plugin --D
检查package.json文件该字段,devDependencies代表开发环境下,以下说明开发环境安装成功
“devDependencies”: {
“html-webpack-plugin”: “^3.2.0”,
“webpack-cli”: “^3.3.11”
}
如果安装错误可执行命令: npm uninstall html-webpack-plugin 进行卸载
这个插件的作用就是，可以把我们打包后的main.js自动添加到我们的index.html中
现在的打包文件都是自带的，但是我们一定要学会如何自己配置webpack.
webpack入口:默认找的是 src 下的index
webpack出口:找的是打包后生成的dist目录下的main.js
plugin:把我们打包后的main.js自动添加到我们的index.html中
手动配置webpack需要新建一个文件:webpack.config.js
webpack.config.js —配置如下:
//配置文件
//遵循 common Js 规范
引入:requeire
导出:exports
//导出的可以是一个函数，也可以是一个对象
const path = require(“path”) //引入规范自带的path
module.exports = {
entry:"./src/index.js", //入口(配置入口文件，单个入口文件)
output:{//输出配置 可以给他加一个hash值,防止他有缓存
//文件指纹 有三种 //1.整个项目产生的hash 2.chunkHash根据入口文件产生 3.content根据内容产生的
filename:“bundle.[contentHash:8].js”, //输出文件名称,给他一个8位的缓存值
path:path.resolve(__dirname,“name”) //输出文件到dist目录 //绝对地址
}
}
这个时候我们执行打包命令 -----------npm run dev
可以看到，再dist目录下，我们的打包文件已经出现，但是，之前打包的文件main.js依然存在，这个时候我们就需要
借助一个插件，在打包之前，就把dist目录清除，在进行生成，这样之前的文件就不会有了。
安装 clean-webpack-plugin 插件
执行命令:
npm install clean-webpack-plugin --D //安装到开发环境下
执行完毕后，需要引入一下
const {CleanWebpackPlugin} = require(“clean-webpack-plugin”);//ES6解构赋值写法
引入完毕需要以下使用
plugins:[//设置插件使用
new CleanWebpackPlugin() //通过new去执行.作用:清空输出的目录
]
这个时候我们再次尝试打包命令，会发现，dist只有一个我们生成的js了。
这地方有个扩展设置，一定要知道。工作当中可能有这种需求，我只清除指定的文件。就可以如下操作:
plugins:[//设置插件使用
new CleanWebpackPlugin({//通过new去执行.作用:清空输出的目录
cleanOnceBeforeBuildPatterns:[‘cc/*’,’!cc/a.js’] ,
//前面的意思代表只清除cc目录下的所有文件,但不包括cc目录下的a.js这个文件
})
]
这种需求很少，了解一下即可。
还记得前面，我们曾安装了一个插件 html-webpack-plugin,专门用来，将我们打包好的文件，引入到模板文件index.html当中，也需要在webpack.config.js 之中引入并使用，使用方法如下:
//这里注意html-webpack-plugin不是构造函数，所以不要用解构赋值
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins:[//设置插件使用
new CleanWebpackPlugin(), //通过new去执行.作用:清空输出的目录
new HtmlWebpackPlugin({ //作用:将我们打包好的文件，打包后自动引入到模板文件index.html当中
template:"./index.html", //设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
hash:true, //这里也可以选择给他设置一个hash值,这样上面的output就可以不用添加[contentHash:8] 了
filename:"home.html" //输出文件的名称(打包后的html文件名,可以自己设置)
})
]
//这样自动引入打包文件，就完成了。
最后我们打包成功如下图：
webpack.config.json 手动配置如下：
//配置文件
//遵循 common Js 规范
const path = require("path") //引入规范自带的path
const { CleanWebpackPlugin } = require("clean-webpack-plugin");//ES6解构赋值写法
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry:"./src/index.js", //入口(配置入口文件，单个入口文件)
output:{//输出配置 可以给他加一个hash值,防止他有缓存
//文件指纹 有三种 //1.整个项目产生的hash 2.chunkHash根据入口文件产生 3.content根据内容产生的
filename:"bundle.js", //输出文件名称,给他一个8位的缓存值
path:path.resolve(__dirname,"dist") //输出文件到dist目录 //绝对地址
},
plugins:[//设置插件使用
new CleanWebpackPlugin(), //通过new去执行.作用:清空输出的目录
new HtmlWebpackPlugin({
template:"./index.html", //设置打包后的文件,插入到的模板html文件是哪个(依赖的模板文件)
filename:"home.html" //输出文件的名称(打包后的html文件名,可以自己设置)
})
]
}
