前言
随我来, 去看看 webpack!(为时未晚)============》第一版(较浅显的知识, 懂得可忽略本文)
方向
安装, 起步搭建运行. (粗略代过)
对于资源的管理, 对于输出的管理. (举例介绍)
本地开发 (基础服务)
热更新 =[模块热替换] (初步认识)
1. 初步构建
mkdir webpack_demo && cd webpack_demo // 新建一个文件 并进入更目录 `mkdir 是 linux 命令 `
npm init -y // 初始一个 packjage.json 文件 -y 表示跳过询问步骤 …
// 安装 webpack
npm install webpack –save-dev // 添加 webpack-cli 依赖到 ”devDependencies”
//webpack4.0+ 需要安装 webpack-cli
npm install webpack-cli –save-dev // 添加 webpack-cli 依赖到 ”devDependencies”
// 生成如下目录
├── package.json
├── src // 源目录(输入目录)
│ ├── index.js
├── dist // 输出目录
│ ├── index.html
// 修改 `dist/index.html`
< !DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>webpack_demo</title>
</head>
<body>
<script src=”main.js”></script> // 为什么是 main.js 下面会解释
</body>
</html>
// 修改 `src/index.js `
function component() {
var element = document.createElement(‘div’);
element.innerHTML = “ 整一个盒子 ”
return element;
}
document.body.appendChild(component());
npx webpack (Node 8.2+ 版本提供的 npx 命令) node node_modules/.bin/webpack (8.2- 版本)
会将我们的脚本作为入口起点，然后 输出 为 main.js.
打开 dist/index.html 你将会看到 整一个盒子 几个字样~
2. 资源管理, 输出管理. 基本开发起步
// 生成如下目录
├── package.json
+ |── webpack.config.js //webpack 配置文件
├── src // 源目录(输入目录)
│ ├── index.js
├── dist // 输出目录
│ ├── index.html
先介绍一个 Lodash 库 它是一个一致性、模块化、高性能的 JavaScript 实用工具库 模块化处理非常适合值操作和检测(说白了就是 webpack 用了我也试试 …) lodash 相关文档 npm install lodash –save // 非仅在开发的时候使用的依赖 就是需要打包到生产环境的包 不加 -dev
// src/index.js
import _ from ‘lodash’;
function component() {
var element = document.createElement(‘div’);
element.innerHTML = _.join([‘lodash’,’webpack’],”); //join 将 array 中的所有元素转换为由 ” 分隔的字符串 其它函数可以自己实践
return element;
}
打开 index 页面输出 loadshwebpack
//webpack.config.js
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’, // 入口
output: {// 出口
filename: ‘main.js’, // 打包之后脚本文件名称
path: path.resolve(__dirname, ‘dist’) // 路径指向执行 js 文件的绝对路径 此处为 /dist
}
};
执行 npx webpack –config webpack.config.js (把之前 dist 目录下 main.js 删除) 新的脚本生成(其实没多大变化..)
// 配置一下 package.json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“build”: “webpack” // 添加此行命令 下次执行打包就是 npm run build 相当于上面的 npx webpack –config webpack.config.js
},
// 资源的配置 css 图片 js 等等.. 举例 css 图片
npm install –save-dev style-loader css-loader css 的 loadernpm install –save-dev file-loader file(图片)对象的 loader
// 生成如下目录
├── package.json
+ |── webpack.config.js //webpack 配置文件
├── src // 源目录(输入目录)
│ ├── index.js
+ │ ├── index.css
+ │ ├── icon.jpg
├── dist // 输出目录
│ ├── index.html
// 修改 webpack.config.js
const path = require(‘path’); //path 路径模块
module.exports = {
entry: ‘./src/index.js’, // 入口
output: {// 出口
filename: ‘main.js’,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [
{
test: /\.css$/, // 检测正则匹配.css 结尾的文件
use: [// 使用俩个 loader
‘style-loader’,
‘css-loader’
]
},
{
test: /\.(png|svg|jpg|gif)$/, // 正则匹配.png svg jpg gif 结尾的文件
use: [// 使用 file-loader
‘file-loader’
]
}
]
}
};
// 修改 src/index.css
div{
color:red;
}
// 修改 src/index.js
import _ from ‘lodash’;
import “./index.css”;
import Icon from ‘./icon.jpg’;
function component() {
var element = document.createElement(‘div’);
element.innerHTML = _.join([‘loadsh’, ‘webpack’], ‘ ‘);
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
npm run build(删除之前的 dist 目录下 main.js) 你会看红字和图片 以上就是资源管理的简短介绍
npm install –save-dev html-webpack-plugin 安装 html-webpack-plugin 模块 模块用到功能: 1：动态添加每次 compile 后 js css 的 hash 2: 可配置多页面 单页面 这些 3：其它没涉及到 npm install clean-webpack-plugin –save-dev 清除 dist 文件夹 (每次删除麻烦了..) 配置一下
// 修改目录
├── package.json
|── webpack.config.js //webpack 配置文件
├── src // 源目录(输入目录)
+ │ ├── app.js
+ │ ├── print.js
│ ├── index.css
│ ├── icon.jpg
├── dist // 输出目录
│ ├── index.html
//webpack.config.js ===============================================
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
module.exports = {
entry: {
app: ‘./src/index.js’,
print: ‘./src/print.js’
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title: ‘webpack_demo’
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}
]
}
};
// 修改 src/index.js ===================================================
import _ from ‘lodash’; // 引入 lodash 模块
import “./index.css”; // index.css
import Icon from ‘./icon.jpg’; // 图片
import printMe from “./print.js” // printJS
function component() {
var element = document.createElement(‘div’); // 创建一个元素
element.innerHTML = _.join([‘loadsh’, ‘webpack’], ‘ ‘); // lodash 中_.join 方法
var myIcon = new Image(); // 创建一个图片
myIcon.src = Icon; //src 赋值
element.appendChild(myIcon); // 追加图片
var btn = document.createElement(‘button’); // 创建按钮
btn.innerHTML = ‘Click me and check the console!’; // 内容赋值
btn.onclick = printMe; // 添加事件
element.appendChild(btn); // 追加元素
return element;
}
document.body.appendChild(component()); // 追加元素到 body 中
// 修改 src/print.js ==========================================
export default function printMe() {
console.log(‘from print.js’);
}
npm run build 会发现基本 webpack 的配置之后 , 有点模样 (意思) 了 打开页面 index.html 正常访问
3. 本地开发
npm install –save-dev webpack-dev-server “webpack-dev-server” 为你提供了一个简单的 web 服务器，并且能够实时重新加载
// 修改 webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
const webpack = require(‘webpack’);
module.exports = {
entry: {
app: ‘./src/index.js’
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
devServer: {
contentBase: ‘./dist’
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title: ‘webpack_demo’
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}
]
}
};
// 修改 package.json
…
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “webpack-dev-server –open”, //start 命令
“build”: “webpack”
},
…
npm run start 本地起了 8080 端口的服务, 你也可以看到自己的页面
4. 热更新
// 修改 webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
const webpack = require(‘webpack’);
module.exports = {
entry: {
app: ‘./src/index.js’
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
devServer: {
contentBase: ‘./dist’,
hot: true
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title: ‘webpack_demo’
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}
]
}
};
npm run start 运行 http://localhost:8080/ 然后你去修改 print js 的 console(或者添加其他代码) 会发现命令行输出 updated. Recompiling… 字样 这就是简单的实现了热更新
最后
本文只是大概从几个 demo 来对于 webpack 的基础概念 入口 entry 出口 output loader plugins mode(没有直面涉及)几大模块的梳理于实践, 让大家对于 webpack 不在那么陌生!
后续文章会从更深入的角度去学习 webpack! 暂定下周 1 发表文章(内容 详细介绍 hot 实现一个简易的 vue-cli 等等)
demo 的代码我会同步 github