【webpack教程一】如何快速上手安装webpack并执行构建

【webpack教程一】如何快速上手安装webpack并执行构建

简介

• webpack 是基于nodejs的一个打包构建的工具
• webpack 是一个打包模块化的js工具，从入口模块开始，识别代码中的模块导入语句，如import，通过递归的方式找出入口文件汇总所有的依赖，然后把这些依赖包一并打包到一个单独的文件中。
• 最核心的特点在于：工程化+自动化（为你省事）

安装

1、环境准备

nodejs：https://nodejs.org/en/

建议下载最新LTS稳定版（不要安装current版本），便于提升webpack的打包速度，提高生产力嘛，总而言之，版本号越高，打包速度越快。

2、全局安装，不建议这么干

注意：安装webpack V4+版本时，需要额外安装webpack-cli脚手架工具

npm install webpack webpck-cli -g

为什么不建议这么干，因为安装webpack时会固定一个版本，将造成项目中webpack版本不兼容问题，导致构建失败，然后你得卸载或者降级。。很麻烦的

3、项目安装，推荐方式

安装最新版本：npm i -D webpack

安装指定版本：npm i -D webpack@<version>

安装最新的体验版本，可能还有bug，不要用于生产环境：npm i -D webpack@beta

4、检查安装

默认在全局环境下查找：webpack -v

npx帮助我们在项目中node_modules里查找webpack：npx webpack -v

启动webpack执行构建

1、webpack默认配置

• webpack默认支持js模块和son模块
• 支持CommonJS Es module AMD等模块类型
• webpack4支持零配置使用，但是很弱，稍微复杂些的场景都需要额外扩展

2、准备执行构建

• 新建src文件夹

• 新建src/index.js、src/index.json、src/other.js

  index.js

  const json = require("./index.json");//commonJS 
  
  import { add } from "./other.js";//es module console.log(json, add(2, 3));
  
  

  index.json

  {
   "name": "JOSN"
  }
  

  other.js

  export function add(n1, n2) {
    return n1 + n2;
  }
  

3、执行构建

npx方式 ：npx webpack

npm script：npm run test

修改package.json⽂文件：

"scripts": { 
  	"test": "webpack"
},

原理就是通过shell脚本在node_modules/.bin⽬目录下创建⼀一个软链接。

4、构建成功

我们会发现目录下多出⼀个 dist 目录，里面有个 main.js ，这个文件是一个可执行的JavaScript文件，⾥面包含webpackBootstrap 启动函数。

5、默认配置

 
const path = require("path"); module.exports = {
// 必填 webpack执⾏行行构建⼊口 entry: "./src/index.js", output: {
// 将所有依赖的模块合并输出到main.js filename: "main.js",
// 输出⽂文件的存放路路径，必须是绝对路路径
path: path.resolve(__dirname, "./dist")
} };