webpack 指南

本项目npm run build 的两种形式：

1. package.json 中 scripts:build:‘webpack’
2. scripts:build:‘webpack --config build’

第一种对应文件夹 webpack.config.js 打包资源 同一个路径下
第二种对应文件夹 build/index.js 打包资源 分文件夹

• 对应自动创建的 html文件 引入一个js 与 引入 js\css

学习webpack

一、安装

1. mkdir webpack-demo
2. cd webpack-demo
3. npm init -y
4. npm install webpack webpack-cli --save-dev

• mkdir make Directory 创建目录结构 webpack-demo文件名
• cd webpack 进入文件夹
• npm init -y 创建一个package.json文件 -yes 默认回车
• npm install webpack webpack-cli --save-dev
  本地安装webpack 并且安装-cli工具用于在命令行中运行webpack
• –save 打包到生产环境 bundle 中时
• –save-dev 装一个用于开发环境的 package 时

二、webpack基础配置

前言

1. js项目中script:src 引入的资源无法体现脚本依赖于外部库
2. 如果依赖不存在或者引入顺序错误，应用程序无法正常运行
3. 引入依赖但是没有使用，浏览器将下载无用代码

• 总结：使用webpack去管理js项目中的问题

1.分发代码

定义： 目录结构dist文件夹 存放分发代码是指构建过程中，经过最小化和优化后产生的输出结果，
最总将在浏览器中加载

2. 创建分发包方式

• a. 手动创建dist目录
  • 文件index.html 自定义创建

  方法一：需要的 js文件都将从外部引入script:src

  方法二：文件中的js文件 import方式引入

• b. 自动创建dist目录

第一步：安装插件HtmlWebpackPlugin
第二步：引入require(‘HtmlWebpackPlugin’)
第三步：plugins:[]配置new HtmlWebpackPlugin({})

3.运行项目

• 方法一： npx webpack

将脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出

• 方法二： 使用配置文件 npm run build

方法一：webpack.config.js package.json 中配置 “build”: “webpack”
方法二：自己创建一个文件夹 build/index.js 配置webpack可以拆分

• 方法三：开发工具

webpack-dev-server 提供基本web server，具有 live reloading(实时重新加载) 功能

第一步：npm install --save-dev webpack-dev-server

第二步：webpack.config.js 中devServer: {
static: ‘./dist’,
},

第三步：package.json配置 “start”: “webpack serve --open”,

三、webpack管理资源

• webpack工具动态打包所有依赖（构建依赖图），可以避免打包未使用的模块
• 构建 web 站点或 web程序中所有非js内容，例如css