webpack是模块打包机，是由nodejs编写的，可以把.vue文件编译。凡是浏览器不支持的文件（sass、typeScript），webpack都可以帮你转换成浏览器支持的文件。
处理模块通过loader进行打包，不同的文件用不同的loader.
webpack（模块打包机） gulp（前端自动化构建工具）没有可比性
什么是webpack
模块化打包器
作用：将浏览器不是别的语法转换成浏览器识别的语法
工作流程：
通过通过一个入口文件，找到这个入口文件所依赖的所有模块 通过loader进行打包，打包成一个或多个js文件
1、全局安装
cnpm install webpack@3.5.3 -g
2、创建文件夹 初始化文件夹
npm init -y
3、局部安装webpack (手动搭建项目)
npm install webpack@3.5.3 --save-dev
4、创建webpack.config.js
5、创建 src dist 文件夹
src---index.js
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
/*
__dirname:当前文件夹的绝对路径
path.join() 将第一个参数和第二个参数进行链接
*/
const PATH = {
app:path.join(__dirname,"./src/index.js"),
build:path.join(__dirname,"./dist")
}
//下面的代码都是 webpack的配置项
module.exports = {
entry:{
//这里面的key值决定了下面name的名字叫什么
app:PATH.app
},
output:{
filename:"[name].js",//app.js
path:PATH.build
},
//做模块的处理 用loader进行处理
module: {
rules:[
{
test:/\.js$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/env","@babel/react"]
}
}
},
{
test:/\.(css|scss)$/,
use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上 从右至左
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:"index.html",
template:"./index.html",
title:"小甜甜",
arr:["c","j","l"]
})
]
}
在项目根目录下创建index.html模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title%></title> </head> <body> <% for(var i=0;i<htmlWebpackPlugin.options.list.length;i++){%>
<p><%= htmlWebpackPlugin.options.list[i]%></p> <%}%> </body> </html>
one.js
let a=1;
let b="one";
export{
a,
b
}
body.scss
body{
background:yellow
}
index.js
import * as obj from "./one";//import * as obj from 'xx' 这种写法是把所有的输出包裹到obj对象里
import "./body.scss";
console.log("你好");
console.log(obj.a);
6、处理css的loader
cnpm install --save-dev style-loader css-loader sass-loader node-sass
7、处理js的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
8、插件
cnpm install html-webpack-plugin --save-dev;
打包的命令：webpack
9、热更新 服务器
cnpm install webpack-dev-server@2 --save-dev;
在package.json的scripts对象中添加以下代码：
"dev":"webpack-dev-server --open",
运行项目：npm run dev
注：
webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以可以使用这条命令 npm install webpack webpack-cli -g
cnpm install webpack-cli --save-dev