【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")
} };