https://www.webpackjs.com/guides/getting-started/
webpack
概念：模块化打包器 作用： 1.将浏览器不识别的语法 转换成浏览器识别的语法 eg:typeScript scass less 等css预处理器。 2.模块化，将复杂的程序细化为小的文件 还可以： css解析，js解析，img解析，html压缩，代码合并。gulp所能做的webpack都能做。 工作流程： 把你的项目当做一个整体，通过一个给定的文件（入口文件index.js），webpack找个这个入口文件所依赖的所有文件 通过loader进行打包，打包成一个或者多个浏览器可识别的js文件 loader 第三方包，处理各种模块处理不同的模块，用不同的loader
webpack vs gulp 区别
没有可比性 webpack是模块打包机（功能更多） gulp是前端自动化工具 主要做项目的部署工作
使用流程
（手动搭建项目的流程），仅适合4.0以下打包方式。4.0以上不适合
1、全局安装webpack（安装一次即可）cnpm install webpack@3.5.3 -g 2、创建文件夹 并初始化文件夹npm init -y 3、局部安装webpackcnpm install webpack@3.5.3 --save-dev 4、创建 webpack.config.js文件 5、创建 src入口文件夹 dist出口文件夹 自己创建入口文件：src/index.js 6、安装处理css的loader cnpm install --save-dev style-loader css-loader sass-loader node-sass 7、处理js的loadercnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react 8、插件（帮我们生成html模板，同时帮我们自动引入你想引入的文件）cnpm install html-webpack-plugin --save-dev 9、热更新 服务器（一定要写准版本号）cnpm install webpack-dev-server@2 --save-dev 在page.json的scripts中自定义运行的命令，（npm run dev）会自动打开浏览器"dev":"webpack-dev-server --open", 含义：通过webpack启服务，webpack会默认找到src/的文件，--open会自动打开浏览器 webpack.config.js
//手动配置webpack
/*
_dirname:当前文件夹的绝对路径(f:\0react\react\day01\demo)
path.join()将第一个参数和第二个参数进行连接(f:\0react\react\day01\demo.\src\index.js)
*/
//引入node的核心模块const path = require("path"); //引入模板const HtmlWebpackPlugin = require ("html-webpack-plugin"); //配置路径（下面会用到）const PATH = { app:path.join(__dirname,"./src/index.js"),//入口文件路径 build:path.join(__dirname,"./dist")//出口文件路径} //下面的代码都是webpack的配置项，module.exports：是node中内置的一个导出模块的方法 module.exports = { //入口文件 entry:{ //这里面的key值决定了下面name的名字叫什么 app:PATH.app, }, //出口文件 output:{ filename:"[name].js",//app.js path:PATH.build//出口文件路径 }, //对模块的处理,用loader进行处理（对浏览器不识别的语法进行处理，eg:es6,.vue文件，.react文件等等都要在module中进行处理），将模块进行打包 module:{ rules:[ { //如果有.js文件，用下面的loader进行处理 test:/\.js$/, use:{ loader:"babel-loader", options:{ //如果在.js文件中遇到了es6代码，则用@babel/env进行处理，如果遇到了react代码，则用@babel/react进行处理 presets:["@babel/env","@babel/react"] } } }, { //如果有.css文件或者.scss文件，则用下面的loadr进行处理 test:/\.(css|scss)$/, use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上，从右至左 //eg:如果遇到了sass文件，则先执行scss-loader文件，然后在向左执行 } //loader是第三方的包，要进行下载 ] }, //webpack所有的插件使用位置 plugins:[ new HtmlWebpackPlugin({ //出口的index.html文件 filename:"index.html",//当前webpack会根据（下面的）模板生成index.html文件（该index.html文件在dist文件夹中，为出口文件，打包后会自动生成） //模板文件 template:"./index.html", //./index.html为自己在根目录下创建的模板文件（自己手动创建的模板文件，在项目根目录下） //数据和模板进行结合 title:"笑笑笑", arr:["李湘","王楠","张三"] }) ]}