1、webpack是什么东西?干什么用的?
它一个模块打包器
作用:
1、可以当做一个服务器
2、将浏览器不识别的js语法转换为浏览器识别的js语法(将ES6转为可识别的ES5)
3、将我们的模块进行打包
......
通过npm全局安装的工具 C:{管理员账号路径}\AppData\Roaming\npm 全局安装webpack : (1). npm install webpack@3 -g; (2). npm install webpack -dev - server@2 -g; 本地安装 npm install webpack@3 -D; npm install webpack - dev - server@2 -D;
2、webpack工作的原理:
将项目中的多个模块进行打包
,把凡是js html css 等文件通过
loader
的方式进行模块打包
入口文件-->
module(loader 处理 配置.....)---出口文件
(1)、npm init -y 初始化文件
(2)、局部安装webpack cnpm install webpack@3 --save-dev
(3)、创建一个webpack.config.js文件
//引入node的核心模块
注:以下为js代码
const
path
=
require
(
"path"
);
const
htmlWebpackPlugin
=
require
(
"html-webpack-plugin"
);
//配置路径
const
PATH
= {
/*
path.join将第一个路径和第二个路径结合起来
生成一个新的路径
__dirname:当前文件的绝对路径
*/
app:path
.
join
(
__dirname
,
"src/index.js"
),
main:path
.
join
(
__dirname
,
"dist/"
)
}
// 忽略文件: 创建一个.gitignore文件将node_modules文件忽略: .gitignore文件中写入 node_modules;
//配置文件
module
.
exports
= {
//入口文件的配置信息
entry:
{
//入口文件的地址
app:PATH
.
app
},
//出口文件的配置信息
output:
{
//打包完成以后的js文件的名称
filename:
"[name].js"
,
//打包完成以后的js文件放置的位置
path:PATH
.
main
},
module:
{
rules:
[
{
//匹配哪些文件用以下的loader
test:
/
\.
js
$
/
,
use:
{
loader:
"babel-loader"
,
//将ES6的代码转换为ES5的代码
options:
{
presets:
[
"env"
]
}
}
},
{
test:
/
\.
(
css
|
scss
)
$
/
,
//从右到左 从下到上
use:
[
"style-loader"
,
"css-loader"
,
"sass-loader"
]
}
]
},
plugins:
[
//自动帮我们创建一个html文件 帮我们把相关的js进行引入
new
htmlWebpackPlugin
({
//生成html文件的明细
filename:
"newIndex.html"
,
template:
"index.html"
,
title:
"德玛西亚"
,
header:
"<h1>诺克萨斯</h1>"
,
list:
[
"张三"
,
"李四"
,
"陈亮"
]
}),
new
htmlWebpackPlugin
({
//生成html文件的明细
filename:
"list.html"
,
template:
"index.html"
,
title:
"德玛西亚"
,
header:
"<h1>诺克萨斯</h1>"
,
list:
[
"张三"
,
"李四"
,
"陈亮"
]
})
]
}
/*以上这种打包方式在4.0中以废除了,4.0以下版本还可以正常使用*/
|
Webpack--模块打包器
猜你喜欢
转载自www.cnblogs.com/yunshangwuyou/p/9335825.html
今日推荐
周排行