一、webpack 基础
1、概念：
模块化打包工具
2、作用：
将浏览器不识别的语法，转换成浏览器识别的语法
3、工作流程：
通过一个入口文件，找到这个入口文件所依赖的所有模块，通过loader进行打包，打包一个或多个js文件
4、webpack vs gulp
没有可比性
webpack：模块打包机
gulp：前端自动化工具
二、webpack 使用
1、全局安装webpack
npm install webpack@3.5.3 -g
2、创建文件夹 初始化文件夹
npm init -y
3、局部安装 webpack
npm install --save-dev webpack@3.5.3
4、创建 src、dist 文件夹，
5、在 src 文件夹中创建文件 index.js
6、创建 index.html ,以此作为模板
7、创建 webpack.config.js
三、webpack.config.js 配置如下
1、前期准备（各种依赖包）
a、安装处理 css 的 loader
npm install --save-dev style-loader css-loader sass-loader node-sass
b、安装处理 js 的 loader
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
c、插件（根据模板自动生成 html 文件）
npm install --save-dev html-webpack-plugin
d、热更新、服务器
npm install --save-dev webpack-dev-server@2
2、webpack.config.js 示例代码
1 const path = require("path"); 2 const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 ??4 /* 5 ????__dirname ???当前文件夹的绝对路径 6 ????path.join() ????将第一个参数和第二个参数进行链接 7 */ 8 ??9 const PATH = {10 ????//入口文件11 ????app:path.join(__dirname,"./src/index.js"),12 ????//出口文件夹13 ????build:path.join(__dirname,"./dist")14 }15 ?16 //下面的代码都是 webpack的配置项17 module.exports = {18 ????//入口19 ????entry:{20 ????????//这里面的key值决定了下面name的名字叫什么21 ????????app:PATH.app22 ????},23 ????//出口24 ????output:{25 ????????// [name] 指的是前面的 app26 ????????filename:"[name].js",27 ????????path:PATH.build28 ????},29 ????//做模块的处理 用loader进行处理30 ????module: {31 ????????rules:[32 ????????????{33 ????????????????test:/\.js$/,34 ????????????????use:{35 ????????????????????loader:"babel-loader",36 ????????????????????options:{37 ????????????????????????presets:["@babel/env","@babel/react"]38 ????????????????????}39 ????????????????}40 ????????????},41 ????????????{42 ????????????????test:/\.(css|scss)$/,43 ????????????????//loader的执行顺序是从下至上 从右至左44 ????????????????use:["style-loader","css-loader","sass-loader"]45 ????????????}46 ????????]47 ????},48 ????plugins:[49 ????????new HtmlWebpackPlugin({50 ????????????//生成的文件51 ????????????filename:"index.html",52 ????????????//模板index.html53 ????????????template:"./index.html",54 ????????????/*以下为自定义的属性*/55 ????????????title:"小甜甜",56 ????????????arr:["张三","李四","王五"]57 ????????})58 ????]59 }3、模板 index.html 示例代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????// htmlWebpackPligin 是固定的 8 ????<title><%= htmlWebpackPlugin.options.title%></title> 9 </head>10 <body>11 ?12 ????<% for(var i=0;i<htmlWebpackPlugin.options.arr.length;i++) {%>13 ????????????<p><%= htmlWebpackPlugin.options.arr[i]%></p>14 ????<%}%>15 ?16 </body>17 </html>webpack打包
原文地址：https://www.cnblogs.com/jokehl/p/9998199.html