有哪些打包工具?
Grunt、Gulp、Parcel、Webpack、Rollup、Vite…
目前市面上最流量的还是Webpack
Webpack是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做 bundle。
Webpack 本身功能是有限的:
步骤①:确保有nodex.js环境;
步骤②:准备一个项目
|- src
index.js
|- dist //不是自己创建的,通过webpack打包后,自动生成的文件存放路径
package.json 项目依赖文件 // npm init npm init -y :不用输入配置项
webpack.config.js webpack的配置文件 (必须要叫这个名字)
步骤③:安装webpack
先全局安装,再局部安装!
全局安装 :npm i webpack webpack-cli -g
验证是否安装 成功: webpack -v
本地安装:npm i webpack webpack-cli -D
步骤④:在index.js中简单写入内容
console.log('hello webpack22222');
//这是添加的方法
function add(num1, num2) {
return num1 + num2
}
console.log(add(3, 4));
步骤⑤:webpack.config.js进行简单配置
module.exports = {
//入口----源文件
entry: "./src/index.js",
//出口----输出位置
output: {
filename: "./dist/index.js"
},
mode: "development"
}
注:模式是development与production是不同的,production中没有使用的函数等,打包之后是不会出现在文件中的。
步骤⑥:在终端输入命令webpack
进行打包,会自动生成dist文件。
问题1:通过上述步骤打包后,dist有两层文件,如何解决呢?
在出口output中加入path: __dirname+"/dist"
,注意这里必须是绝对路径
module.exports = {
//入口----源文件
entry: "./src/index.js",
//出口----输出位置
output: {
path: __dirname+"/dist",//这里的路径必须是绝对路径
filename: "index.js"
},
mode: "development"
}
问题2:webpack.config.js能不能改名字?
可以改名字。如果 修改为 demo.config.js
修改配置文件的名字后,需要我们执行,指定我们的配置文件。
将上面步骤⑥中在终端的输入的命改为webpack --config demo.config.js
或者
自定义指令
在package.json中编写如下代码:“build”: “webpack --config demo.config.js”
在终端执行命令:npm run build
string 一个js文件
entry:“./src/index.js”
array 可以放多js文件
entry:[“./src/index.js”,“./src/login.js”],默认合并为一个文件进行输出
json对象(多页面应用,即输出多个文件)
entry:{
key1 :"./src/index.js",
key2:"./src/login.js"
}
output:{
path:__dirname+"/dist", //这里的路径必须是绝对路径
filename:"[name].js"
},
// 注: [name] 对应的是入口json对象的键名
默认不会打包html,需要一个插件
①、下载插件
npm i html-webpack-plugin -D
②、引入插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
③、使用插件(配置插件)----简单的使用
plugins: [
new HtmlWebpackPlugin()
]
new HtmlWebpackPlugin(); 默认直接使用它,自动生成index.html,并且将output的文件声明script来引用。
③、使用插件(配置插件)----模板的使用
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html', //模板
title:'这是测试用的标题',
hash:true, //默认是false true的作用是给js文件加一个hash值,清除js缓存
minify:{
collapseWhitespace:true //折叠空白区域
},
chunks:['page1','page2'], //对应引入的js文件
filename: 'index.html', //生成的文件名
})
]
需要显示设置的标题,使用如下的方法<%= htmlWebpackPlugin.options.title %>
作用:打包之前把原来dist文件夹删除;
①、下载插件
npm i clean-webpack-plugin -D
②、引入插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
③、使用插件
plugins:[
new CleanWebpackPlugin()
]
开发环境服务配置
①、下载插件
npm i webpack-dev-server -D
不需要引入插件,配置也不是在plugins中,在devServe中配置
②、配置
devServer: {
//服务地访问的文件地址
static: {
directory: path.join(__dirname, 'dist'),
},
//服务器的ip地址
host: 'localhost',
//端口号
port: 1234,
//自动打开
open: true,
//热更新, false 会及时刷新
hot: true
}
devServer 里的配置修改了,需要重新启动服务器
③、启动服务
在终端输入命令webpack serve
或者
在package.json中配置:
在终端输入命令npm start
在js文件中,使用import 导入css; 默认不认识css。
①、下载
npm i css-loader style-loader -D
②、使用配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //写法是有顺序
}
]
}
①、下载
npm i less less-loader -D
②、使用配置
module: {
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
//顺序很重要(从右到左)
// /!*use:["style-loader","css-loader",'less-loader']*!///
}
]
}