# webpack-demo
**Repository Path**: codezm/webpack-demo
## Basic Information
- **Project Name**: webpack-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-28
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
[webpack](https://webpack.docschina.org/) 将模块依赖(预编译文件)打包成静态资源。
-----------------
#### 打包初体验
创建并初始化项目
```bash
mkdir webpack-demo
cd webpack-demo
npm init -y
```
开发依赖安装
```bash
cnpm install webpack webpack-cli --save-dev
```
编写项目代码
```bash
mkdir src
touch src/data.json src/index.js index.html
```
`src/data.json` 文件内容:
```json
{
"content": "webpack study"
}
```
`src/index.js` 文件内容：
```javascript
import data from './data.json'
function say() {
console.log("Hello World!")
}
say()
console.log(data)
```
执行 `webpack` 打包命令
```bash
# 开发模式
npx webpack ./src/index.js -o ./dist/bundle.js --mode=development
# 生产模式
npx webpack ./src/index.js -o ./dist/bundle.js --mode=production
```
新建 `index.html` 文件，打开浏览器 console 查看输出信息，内容如下:
```html
Document
```
webpack 默认可以处理 js 文件、json 文件。
通过对比：生产环境比开发环境多了压缩代码和代码混淆操作。
#### 通过配置文件执行打包操作
```bash
touch webpack.config.js
```
`webpack.config.js` 文件内容：
```javascript
let path = require('path')
module.exports = {
// 入口文件
entry: "./src/index.js",
output: {
// 输出文件名
filename: "bundle.js",
// 输出路径
path: path.resolve(__dirname, 'dist')
},
// 模式设置: development、production、none
mode: "development",
}
```
此时我们可以通过以下命令执行打包操作：
```bash
npx webpack
```
#### 配置 loader 完成样式文件打包
新建 `src/style.css`，文件内容：
```css
body{
background-color: aquamarine;
}
```
编辑 `src/index.js`，引入样式文件，文件内容：
```javascript
import data from './data.json'
import './style.css'
function say() {
console.log("Hello World!")
}
say()
console.log(data)
```
编辑 `webpack.config.js` 文件，配置样式文件 loader ，文件内容：
```javascript
let path = require('path')
module.exports = {
// 入口文件
entry: "./src/index.js",
output: {
// 输出文件名
filename: "bundle.js",
// 输出路径
path: path.resolve(__dirname, 'dist')
},
// 模式设置: development、production、none
mode: "development",
// loader 的配置
module: {
rules:[
{
test: /\.css$/,
use: [
// use 数组中的 loader 执行顺序: 从下到上, 逆序执行。
// 将 js 的样式内容插入到 style 标签里。
"style-loader",
// 将 css 文件转换为 js
"css-loader"
]
}
]
}
}
```
执行打包命令，浏览器打开 `index.html` 预览效果。
```bash
npx webpack
```
#### 配置 plugin 完成 html 文件打包
新建 `src/index.html`
```html
Document
```
编辑 `webpack.config.js`
```javascript
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output: {
// 输出文件名
filename: "bundle.js",
// 输出路径
path: path.resolve(__dirname, 'dist')
},
// 模式设置: development、production、none
mode: "development",
// loader 的配置
module: {
rules:[
{
test: /\.css$/,
use: [
// use 数组中的 loader 执行顺序: 从下到上, 逆序执行。
// 将 js 的样式内容插入到 style 标签里。
"style-loader",
// 将 css 文件转换为 js
"css-loader"
]
}
],
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
]
}
```
执行打包命令:
```bash
npx webpack
```
浏览器打开 `dist/index.html`，预览打包后效果。
#### 配置 loader 完成图片资源打包
编辑 `src/index.html` ，增加图片资源
```html
Document
```
编辑 `webpack.config.js`
```javascript
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output: {
// 输出文件名
filename: "bundle.js",
// 输出路径
path: path.resolve(__dirname, 'dist')
},
// 模式设置: development、production、none
mode: "development",
// loader 的配置
module: {
rules:[
{
test: /\.css$/,
use: [
// use 数组中的 loader 执行顺序: 从下到上, 逆序执行。
// 将 js 的样式内容插入到 style 标签里。
"style-loader",
// 将 css 文件转换为 js
"css-loader"
]
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
// 图片小于 8KB， base64 处理，优点：减少网络请求，缺点：体积会更大
options: {
limit: 8*1024,
// 关闭 url-loader 的 es6 模块化解析
esModule: false,
// 文件名处理：取文件hash 前十位，ext 是文件扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
],
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
]
}
```
安装相关插件
```bash
cnpm install file-loader mime-types url-loader html-loader --save-dev
```
执行打包命令
```bash
npx webpack
```
#### 代码热更新
编辑 `webpack.config.js`
```javascript
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output: {
// 输出文件名
filename: "bundle.js",
// 输出路径
path: path.resolve(__dirname, 'dist')
},
// 模式设置: development、production、none
mode: "development",
// loader 的配置
module: {
rules:[
{
test: /\.css$/,
use: [
// use 数组中的 loader 执行顺序: 从下到上, 逆序执行。
// 将 js 的样式内容插入到 style 标签里。
"style-loader",
// 将 css 文件转换为 js
"css-loader"
]
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
// 图片小于 8KB， base64 处理，优点：减少网络请求，缺点：体积会更大
options: {
limit: 8*1024,
// 关闭 url-loader 的 es6 模块化解析
esModule: false,
// 文件名处理：取文件hash 前十位，ext 是文件扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
],
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
// 项目构建路径
contentBase: path.resolve(__dirname, 'dist'),
// 端口号
port: 3000,
// 启用 gzip 压缩
compress: true,
// 自动打开浏览器
open: true
}
}
```
安装依赖插件：
```bash
cnpm install webpack-dev-server --save-dev
```
执行以下命令，将自动打包、打开浏览器。
```bash
npx webpack-dev-server
```
尝试修改 `src/index.html` ，即可实时编译并刷新浏览器，查看编辑、打包后效果。
#### 参考
本项目是学习自视频： https://www.bilibili.com/video/BV1gA411B7M2