本项目npm run build 的两种形式:
- package.json 中 scripts:build:‘webpack’
- scripts:build:‘webpack --config build’
第一种对应文件夹 webpack.config.js 打包资源 同一个路径下
第二种对应文件夹 build/index.js 打包资源 分文件夹
- 对应自动创建的 html文件 引入一个js 与 引入 js\css
学习webpack
一、安装
- mkdir webpack-demo
- cd webpack-demo
- npm init -y
- 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基础配置
前言
- js项目中script:src 引入的资源无法体现脚本依赖于外部库
- 如果依赖不存在或者引入顺序错误,应用程序无法正常运行
- 引入依赖但是没有使用,浏览器将下载无用代码
- 总结:使用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