webpack是什么呢？
- 模块打包机，分析目录结构，找到js模块（包括浏览器不能识别的代码typscript sass...）,打包成合适的格式供浏览器访问。
- 模块打包 构建（项目）
打包的优势（webpack的优势）
- 1、模块化，拆分了业务复杂的js代码 => 细小的文件
- 2、js拓展 => 基于原型面向对象 => 基于class（typscript es6）=> 浏览器识别
面试会问到
- webpack grunt gulp 这三者的区别：grunt、gulp优化流程的工具，webpack是模块化支持的工具，具有优化流程的功能。
webpack的工作原理
- 他有个js的主入口文件，主入口文件里面有很多相关的文件。打包的时候就从主入口文件进入，按照包含路径一直找下去，最后全部打包成一个js文件（
bundle.js）这个js文件就是供浏览器识别的文件。
webpack安装：
- 先安装nodejs环境（一直点next，检测是否安装好，输入
npm命令会有版本相关内容） - 初始化项目：
npm init(会有一个package.json文件，这个文件里面有很多初始化信息如下图)package.json - 安装webpack：
npm install webpack --save-dev - 打包：
webpack 要打包的文件名 打包以后的文件名
多个js的引入
-
require("./js文件名")在一个js文件的头部
css打包
- 对于外来文件（不支持的文件） => loader插件（支持文件打包的工具）
- css-loader (加载css文件)
- style-loader (支持css运行)
- 安装：
npm install css-loader style-loader --save-dev - 引入css文件：
require("style-loader!css-loader!./css文件")
注意：在项目中，追加了文件（修改了代码），都需要重新打包
常用打包参数：
- webpack 要打包的文件名 打包以后的文件名 --参数名 --参数名 ...
-
--watch自动更新 -
--progress显示打包进度 -
--display-modules列出打包模块 -
--display-reasons打包原因 -
--config 新配置文件名修改webpack默认的配置文件 -
-p压缩混淆脚本 -
ctrl+c终止前一个命令
构件项目的详细事项
- 1、新建项目文件夹
- 2、
npm init初始化项目 - 3、
npm install webpack --save-dev安装webpack - 4、构建项目文件目录：
-
src源文件夹 -
dist打包后文件夹 -
webpack.config.jswebpack默认的配置文件如下
-
module.exports = {
entry:"./src/script/main.js", //输入路径
output:{
path:"E:\\HBuilder\\webtest\\dist\\js\\", //输出路径(widows下需要绝对路径是双斜杠转义,苹果和lunix不需要转义直接./路径的写法)
filename:"bundle.js" // 输出文件名
}
}
/*
还可以这种写法
var paths = require("path");path是node自带模块，路径
module.exports = {
entry:"./src/script/main.js",
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
}
}
*/
- 在package.json文件里面配置webpack，可以用
npm run来启动(在这个版本里必须要安装webpack-cli才能跑起来)
"scripts": {
"bulid": "webpack"
}
- entry 三种调用形式：
-
entry: "./src/script/main.js"单入口文件 -
entry:["文件路径","文件路径"...]多入口文件 数组 -
entry:{path:"url路径"，path:[]}混合模式（不常用）
-
混合模式避免打包后的文件重名：webpack提供的命名方式[name] - [chunkhash] 名称加哈希值
//数组多入口文件写法
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
}
}
html-webpack-plugin插件
- 每次文件名称都不同，引用src文件名称不确定，正确引用就用到插件
- html-webpack-plugin：安装命令
npm install html-webpack-plugin --save-dev - 使用：在webpack.config.js文件引入
var htmlPlugin = require("html-webpack-plugin")，在下面新建对象new htmlPlugin如下，跑起来过后打包后的文件里面多了个index.html文件
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
plugins:[
new htmlPlugin({
template:"index.html" //这里是让根目录的index文件映射到打包后录下的index里面
});
]
}
loader：程序中资源文件进行转换，是nodejs中的函数，可以将资源作为参数来使用并且返回新的资源
- 作用：转化es6、处理less sass 图片 其他文件元素...
- 安装命令：
npm install --save-dev babel-loader babel-core - 上一步安装完了再安装最新的：
npm install --save-dev babel-preset-latest
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js结尾的文件
loader:"babel-loader", //用babel-loader处理 es6语法
exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理）
include:path.resolve(__dirname,"src") //打包的范围（src文件夹里面的内容需要打包）
query:{
presets:["latest"] //最新的babel来处理
}
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //这里是让根目录的index文件映射到打包后录下的index里面
inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
});
]
}
css如何处理
- 下载css处理插件：
npm install style-loader css-loader --save-dev - 然后在配置文件里面添加参数如下，在主文件引入css文件
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js结尾的文件
loader:"babel-loader", //用babel-loader处理 es6语法
exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理）
include:path.resolve(__dirname,"src") //打包的范围（src文件夹里面的内容需要打包）
query:{
presets:["latest"] //最新的babel来处理
}
},
{
test:/\.css$/, //以css结尾的文件
loader:"style-loader!css-loader"
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //这里是让根目录的index文件映射到打包后录下的index里面
inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
});
]
}
- 处理less sass 下载命令：
npm install less-loader(或sass-loader) --save-dev - 在配置文件里面添加下loader
//less
{
test:/\.less$/, //以less结尾的文件
loader:"style-loader!css-loader!less-loader"
}
sass
{
test:/\.sass$/, //以sass结尾的文件
loader:"style-loader!css-loader!sass-loader"
}
html如何处理
- 下载html-loader插件命令：
npm install html-loader --save-dev - 在配置文件里添加loader，然后在模板里面修改
import tpl from "html文件路径" - 在根目录下的index.html里留个放模板id=app的地方，然后在app.js里面创建变量获取到模板的dom，然后把要添加的html页面放入进去就好了。
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
module:{
loaders:[
{
test:/\.js$/, //以js结尾的文件
loader:"babel-loader", //用babel-loader处理 es6语法
exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理）
include:path.resolve(__dirname,"src") //打包的范围（src文件夹里面的内容需要打包）
query:{
presets:["latest"] //最新的babel来处理
}
},
{
test:/\.css$/, //以css结尾的文件
loader:"style-loader!css-loader"
},
{
test:/\.html$/, //以html结尾的文件
loader:"html-loader"
}
]
},
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //这里是让根目录的index文件映射到打包后录下的index里面
inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
});
]
}
//模板文件里处理
import tpl from "./layer.html";
function(){
return{
name:"张三"，
tpl:tpl
}
}
export default layer;
//在根目录index.html下留下模板位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
图片处理
- 图片常用格式
jpg gif png，要处理css中的图片和html img标签里面的图片 - 下载图片文件处理命令：
npm install file-loader --save-dev
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js结尾的文件
loader:"babel-loader", //用babel-loader处理 es6语法
exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理）
include:path.resolve(__dirname,"src") //打包的范围（src文件夹里面的内容需要打包）
query:{
presets:["latest"] //最新的babel来处理
}
},
{
test:/\.css$/, //以css结尾的文件
loader:"style-loader!css-loader"
},
{
test:/\.html$/, //以html结尾的文件
loader:"html-loader"
}
{
test:/\.(jpg | gif | png)$/, //以ipg || gif || png结尾的文件
loader:"file-loader"
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //这里是让根目录的index文件映射到打包后录下的index里面
inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
});
]
}
import layer from "文件路径" 从layer文件夹里面导入layer.js到本文件里面(es6语法)
export default layer 导出函数layer
@import "css文件路径" css文件里面导入css文件的写法
npm 命令
-
npm list --depth=0 -global查看全局下载的所有包 -
npm uninstall -g [包名]卸载安装包
搭建一个完整项目的步骤
- 1、新建项目文件
- 2、
npm initnpm初始化（就会生成一个package.js文件） - 3、
npm install webpack webpack-cli --save-dev安装webpack和webpack-cli 因为我这里安装的是版本4.28.3所以必须安装-cli（这时多了node_modules文件夹是nodejs的配置内容，还会生成package-lock.json这个文件是绑定package.json依赖。这两个都是默认的不用管） - 4、创建项目文件夹目录。webpack.config.js里面是webpack的配置设置，src里面是放被打包文件，components里面放layer里面放模板文件，app.js为主入口文件，dist里面放打包后文件
- 5、下载一个项目的所有插件也就是上面提到的所有。html-webpack-plugin插件、loader资源器、style-loader css-loader样式处理、html-loader页面处理、file-loader文件图片处理
- 6、配置package.json文件，在
scripts自定义里面配置启动webpack用命令npm run [自定义名]，我这里配置的时候后面还加了个参数自动更新可以添加多个 - 7、配置webpack.config.js文件，基本的包括入口，出口，插件的配置
//webpack.config.js里面的内容
var htmlPlugin = require("html-webpack-plugin");//引入html-webpack-plugin插件，让根目录index.html页面映射到dist里面去
var path = require("path");//这是nodejs自身的path函数，获取到准确的路径
module.exports = {
entry:"./src/app.js",//入口主文件
output:{
path:path.join(__dirname,"dist"),//打包到哪个文件的路径(windows是用绝对路径，lunix和苹果是相对路径)
filename:"bundle.js"//打包过后的文件名
},
module:{
loaders:[
{
test:/\.js$/,//正则：以js结尾的文件
loader:"babel-loader",//用babel-loader处理 es6语法
exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理）
include:path.resolve(__dirname,"src"), //打包的范围 （src文件夹里面的内容需要打包）
query:{ //执行过程
presets:["latest"]//最新的babel来处理
}
},
{
test:/\.css$/, //正则：以css结尾的文件
loader:"style-loader!css-loader" //用style-loader css-loader处理
},
{
test:/\.html$/, //正则：以html结尾的文件
loader:"html-loader" //用html-loader处理
},
{
test:/\.(jpg|gif|png)$/, //正则：以jpg || gif || png结尾的文件
loader:"file-loader" //用file-loader处理
}
]
},
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html", //使用html-webpack-plugin插件的语法，让根目录index映射到dist里面
inject:"body" //打包后的js文件添加在哪里，可以不加这句话默认是在body里面也可修改到其他地方
})
]
}
