一、安装

  1. npm init -y // 初始化package.json 文件
  2. npm i webpack webpack-cli -g  // 安装在全局
  3. npm i webpack webpack-cli -D   // 安装在开发模式下使用

二、打包试用

在根目录下新建src文件夹，内部随便新建两个JS文件

  1. ├── package.json   # 根目录
  2. ├── node_modules   # 根目录
  3. ├── src                    # 根目录
  4. │   ├── two.js
  5. │   └── index.js
  1. //two.js
  2. module.exports= ()=>{
  3.     return "听说你很嚣张啊！！！"
  4. }
  5. // index.js
  7. let str = require("./two");
  8. console.log(str);

1、使用 npx 以及webpack零配置 打包

  1. npx webpack // npx 是 npm 5.2版本之后提供的命令可以执行.bin下的可执行文件

执行上面那条命令就会按照默认的 webpack 配置生成一个 dist 目录，并且将上面写的 index.js、two.js 文件打包到一个 main.js 文件内

2、配置 script 脚本

  1. // 在 package.json 内配置一下 scripts 脚本
  2. "scripts": {
  3.   "build": "webpack"
  4. }

配置完成之后，输入 npm run build 之后，这条命令会调用 node_modules/.bin 下的 webpack 命令，然后内部会调用 webpack-cli 解析并打包生成 dist 文件

三、配置模式

在上面零配置打包的时候，有提示需要指定打包的模式

image.png

1、在package.json脚本里区分模式

  1.  "scripts": {   
  2.          // 通过webpack打包，可以使用--传递参数指定mode为开发还是生产
  3.         "dev": "webpack --mode=development",
  4.     "build": "webpack --mode=production"
  5.  }

然后打包的时候，就可以运行**npm run dev** 或者 npm run build 来区分是开发打包，还是生产打包。

2、在webpack.config.js里配置

  1. const path = require("path");
  2. module.exports = {
  3.     mode: "development"
  4. }

这个时候即使不在 package.json 脚本里配置 mode=development 这个时候打包也是可以可以直接指定模式打包

四、配置多个模式及出入口

1、在默认文件内配置出入口

  1. //webpack.config.js
  2. const path = require("path");
  3. module.exports = {
  4.     mode:"development",
  5.     entry:"./src/index.js",  // 设置的相对地址
  6. }
  7. module.exports = {
  8.     mode:"development",
  9. // 设置的绝对地址 path是node环境自带的模块，无需自己装包，其中__diraname指的是当前文件根目录到当前文件的路径
  10.     entry:path.resolve(__dirname,"./src/index.js"), 
  11. }

有了入口，那么就得有出口嘛
  1. //webpack.config.js
  2. const path = require("path");
  3. module.exports = {
  4.     mode:"development",
  5.     entry:path.resolve(__dirname,"./src/index.js"), 
  6.       output:{//配置出口的时候，可以配置打包文件名，以及打包的目录，如果没指定，默认打包到dist目录下的main.js下
  7.         filename:"one.js",  //记得指定打包文件名的时候，要写上后缀
  8.       path:path.resolve(__dirname,"dist")
  9.     }
  10. }

2、在webpack的默认配置文件内配置其他模式

  1. //webpack.config.js
  2. const path = require("path");
  3. // 这个插件是可以按照指定的模板文件生成打包时的入口html文件
  4. const HtmlWebpackPlugin = require("html-webpack-plugin")
  5. module.exports = {
  6.     mode:"production",
  7.     entry:path.resolve(__dirname,"./src/index.js"), 
  8.       output:{//配置出口的时候，可以配置打包文件名，以及打包的目录，如果没指定，默认打包到dist目录下的main.js下
  9.         filename:"one.js",  //记得指定打包文件名的时候，要写上后缀
  10.       path:path.resolve(__dirname,"dist")
  11.     },
  12.     plugin:[  // 如果项目里需要使用插件，需要在这里书写
  13.             new HtmlWebpackPlugin({
  14.            filename:"index.html", //生成的文件名称
  15.            template:path.resolve(__dirname,"./src/public/template.html"), //依赖的模板文件是在哪里
  16.            hash:true,  // 是否开启哈希后缀生成，这是为了避免替换文件缓存
  17.            meta:{}, //这里可以设置生成的html文件中的meta标签内容
  18.            minify:true/false, //是否以最小的格式展示，如果为true,打包的时候则压缩为一行
  19.         })
  20.     ],
  21.    module{
  22.         // noParse表示如果你项目中用到的文件，确定么有用到其他依赖，那么可以在这里声明，在打包的时候webpack就不会再去检查改文件是否有依赖文件
  23.             noParse:/jQuery|lodash/,
  24.       rules:[  // webpack提供让我们自定义打包规则，可以使用各种loader对指定文件进行打包转化
  25.               {
  26.           test:/\.css$/,  // 使用正则，可以匹配以该文件后缀结尾的所有文件
  27.           use:["style-loader","css-loader"],// 规定匹配到的该文件使用何种loader转化,loader是从右往左解析加载，所以书写顺序很重要！
  28.         }
  29.      ]
  30.    }
  31. }