WebPack 是什么
官方就一句话，打包所有的资源。
从阮神的 15 DEOM入手 Webpack
Github 地址
阮神GIT
按照 ReadME 操作
npm webpack-dev-server ，为了能够运行起来demo的代码
cd 到任何一个demo下，执行npm run dev 即可运行demo
npm run dev 是在 demo下的package.json文件中 配置的 script，实际上是在执行 webpack-dev-server --open
对DEMO拆解
准备工作：
请保证电脑上有npm
创建一个文件夹 webpack-tutorial
cmd cd到上面的文件夹，键入 npm init 根据提示步骤创建package.json文件，可以一直enter
npm install webpack webpack-cli webpack-dev-server 安装需要的包
demo1 ：单个入口
创建 webpack.config.js文件，代码如下
module.exports = {
entry: './main.js',//入口文件是当前目录下的 main.js文件
output: {
filename: 'bundle.js'//打包后的文件名称是 bundle.js
//这里webpack会自动创建dist文件夹，将bundle.js放到里面。
//这里的./会指定到 dist下
//比如 filename:'./js/bundle.js' 会在dist下找js文件夹放入bundle.js文件
//可以通过path指定不同的目录
}
};
创建 main.js文件 ，代码如下：
// main.js
document.write('
Hello World
');//往页面上写hello world
CMD中键入 webpack进行打包，键入进行开启
//webpack 输出
Asset Size Chunks Chunk Names
bundle.js 968 bytes 0 [emitted] main
Entrypoint main = bundle.js
webpack-dev-server --open
//打开浏览器后发现是一个ftp的页面
//我们下面将自动创建index.html文件
CMD 键入
npm install html-webpack-plugin
//安装自动生成html插件
重新编辑 webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',//入口文件是当前目录下的 main.js文件
output: {
filename: 'bundle.js'//打包后的文件名称是 bundle.js
//这里webpack会自动创建dist文件夹，将bundle.js放到里面。
//这里的./会指定到 dist下
//比如 filename:'./js/bundle.js' 会在dist下找js文件夹放入bundle.js文件
//可以通过path指定不同的目录
},
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
]
};
重新CMD 键入 webpack 打包 ，键入 webpack-dev-server --open 开启server
//webpack输出
Asset Size Chunks Chunk Names
bundle.js 968 bytes 0 [emitted] main
index.html 187 bytes [emitted]
Entrypoint main = bundle.js
会发现 dist 文件夹下自动生成了 index.html并且引入 打包好的 bundle.js文件，浏览器正常显示一个h1的hello world
demo2 ：两个入口
更改 webpack.config.js 文件如下：
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
bundle1: './main1.js',//入口1 main1.js
bundle2: './main2.js'//入口2 main2.js
},
output: {
filename: '[name].js'//name是entry的键名，最后会生成bundle1.js bundle2.js
},
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
]
};
分别创建 main1.js 与main2.js
// main1.js
document.write('
Hello World
');
// main2.js
document.write('
Hello Webpack
');
CMD 键入 webpack 打包 ，键入 webpack-dev-server --open 开启server
//webpack 输出
Asset Size Chunks Chunk Names
bundle1.js 968 bytes 0 [emitted] bundle1
bundle2.js 971 bytes 1 [emitted] bundle2
index.html 245 bytes [emitted]
Entrypoint bundle1 = bundle1.js
Entrypoint bundle2 = bundle2.js
[0] ./main1.js 39 bytes {0} [built]
[1] ./main2.js 41 bytes {1} [built]
会在dist下 创建 bundle1.js/bundle2.js/index.html，浏览器会有h1的helloworld h2的hellowebpack
demo3 ：Babel-loader 的使用
什么loaders：就是webpack使用loaders来预处理文件，允许打包除了js文件外任何静态资源。
什么是Babel-loader：是javascript编译器，将现行的javascript代码变成浏览器可以兼容的代码。
例子中是 react 所有我们先安装下相关的包
npm install react react-dom//js 用到
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react
//这里说明一下 babel-loader单独安装一下7.1.5的版本，因为最新的8版本 打包时会报错
创建main.jsx文件
// main.jsx
//我们需要增加一部分代码
//增加一个创建wrapper div的过程
//这边我的index.html是自动创建的，打包后在更改 会报错
//不知道阮神是怎么弄的，等我研究明白了再回来说明一下
//如下方法可成功显示
var div = document.createElement('div');
div.id = 'wrapper';
document.body.appendChild(div);
//结束
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
Hello, world!
,
document.querySelector('#wrapper')//将h1这个标签放到 id是wrapper的div中
);
修改webpack.config.js文件
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.jsx',//不说明了
output: {
filename: 'bundle.js'
},
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
],
module: {
rules: [
{
test: /\.jsx?$/,//匹配.jsx文件
exclude: /node_modules/,//不包含这个文件夹 npm包
use: {
loader: 'babel-loader',//使用babel-loader这个
options: {
presets: ['es2015', 'react']//使用 es2015 跟react
//这里说明一下，这里的顺序是从右到左加载的，即，先用react再用es2015
}
}
}
]
}
};
CMD 键入 webpack 打包 ，键入 webpack-dev-server --open 开启server
//webpack 输出
Asset Size Chunks Chunk Names
bundle.js 248 KiB 0 [emitted] [big] main
index.html 187 bytes [emitted]
demo4 ：css-loader使用
cmd 键入
npm install css-loader style-loader
创建 app.css文件
body {
background-color: blue;
}
更改 webpack.config.js，增加一个css-loader
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//同样的 从右到左加载
},
]
}
};
更改main.js文件
require('./app.css');
CMD 键入 webpack 打包 ，键入 webpack-dev-server --open 开启server
//webpack 输出
Asset Size Chunks Chunk Names
bundle.js 147 KiB 0 [emitted] main
index.html 187 bytes [emitted]
demo5 ：image loader
不做赘述，需要 npm url-loader。与上一个demo类似
demo6 ： CSS Module
Css Module：给CSS加入了局部作用域和模块依赖。详情还是请看阮神博客。还有官网。
本次demo 只是介绍了局部作用于与全局作用域。
更改main.jsx文件。同样我们增加一部分代码。
//增加start
var div = document.createElement('div');
div.id = 'example';
document.body.appendChild(div);
var h1 = document.createElement('h1');
h1.className="h1";
var t1=document.createTextNode("Hello World");
h1.appendChild(t1);
document.body.appendChild(h1);
var h2 = document.createElement('h2');
h2.className="h2";
var t2=document.createTextNode("Hello Webpack");
h2.appendChild(t2);
document.body.appendChild(h2);
//end
var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');
ReactDOM.render(
Hello World
Hello Webpack
,
document.getElementById('example')
);
更改webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.jsx',//每次看好打包的入口文件呦
output: {
filename: 'bundle.js'
},
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{//使用module
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
更改app.css
/* local scope */
.h1 {
color:red;
}
/* global scope */
:global(.h2) {
color: blue;
}
CMD 键入 webpack 打包 ，键入 webpack-dev-server --open 开启server
Asset Size Chunks Chunk Names
bundle.js 6.89 KiB 0 [emitted] main
index.html 187 bytes [emitted]
结果是 有一个红色字体的h1 一个黑色字体的h1 两个蓝色字体的h2， 因为h2 的class是global的 h1的local的
demo7：使用 uglifyjs 插件
什么事uglifyjs 插件：将输出的文件bundle.js变到最小。丑化js代码。
这里需要注意webpack 两种模式的 产品模式下 uglifyjs插件是默认开启的我们需要在development模式下搞
更改main.js使用阮神demo中的代码：
var longVariableName = 'Hello';
longVariableName += ' World';
document.write('
' + longVariableName + '
');
在webpack.config.js文件中加入如下配置：
mode: 'development',//开发者模式
我们先打包一次main.js打包成的bundle.js的大小为3.89kb，然后使用插件。这个时候bundle.js可读
npm install uglifyjs-webpack-plugin，更改webpack.config.js，加一个插件其他不更改
var HtmlwebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './main.js',//每次看好打包的入口文件呦
output: {
filename: 'bundle.js'
},
//加入html自动生成
mode: 'development',//开发者模式
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
new UglifyJsPlugin(),//开发者模式下使用插件
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
CMD 键入 webpack 打包 ，查看bundle.js大小1.23KB
demo8 ：html-webpack-plugin与open-browser-webpack-plugin两个插件。
html-webpack-plugin：自动生成html插件。这个插件我们已经使用啦，不介绍了。
open-browser-webpack-plugin：自动打开浏览器插件。
npm install open-browser-webpack-plugin，更改webpack.config.js如下
var HtmlwebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js',//每次看好打包的入口文件呦
output: {
filename: 'bundle.js'
},
mode: 'development',
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
new UglifyJsPlugin(),
new OpenBrowserPlugin({
url: 'http://localhost:8080'//开启服务后自动打开这个网址
})
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
CMD 键入 webpack 打包 ，键入 webpack-dev-server 开启server，不需要--open了 否则会打开两个页面
demo9 ：Environment flags
在开发时，有些东西要放出来，产品环境时需要屏蔽掉。我们可以定一个变量去看当前的模式。
更改main.js
document.write('
Hello World
');
if (__DEV__) {//__DEV__ 在webpack.config.js中定义
document.write(new Date());
}
webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
module.exports = {
entry: './main.js',//每次看好打包的入口文件呦
output: {
filename: 'bundle.js'
},
mode: 'development',
//加入html自动生成
plugins:[
new HtmlwebpackPlugin({
title: 'Webpack-tutorial',
filename: 'index.html'
}),
new UglifyJsPlugin(),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
devFlagPlugin,
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
webpack 打包，并输入cross-env DEBUG=true webpack-dev-server，来控制debug
阮神是想通过命令将当前是否是debug传入到程序中，我们更改一下代码。官网上介绍可以使用process.env.NODE_ENV来访问当前的mode。
main.js
document.write('
Hello World
');
if (process.env.NODE_ENV=="development") {
document.write(new Date());
}
直接看页面。注：更改了config文件需要重新打包其他的不需要。
demo10 ：code splitting
code splitting：打包时，分文件打包
main.js
// main.js
require.ensure(['./a'], function (require) {
var content = require('./a');
document.open();
document.write('
' + content + '
');
document.close();
});
创建a.js
// a.js
module.exports = 'Hello World';
其他不变，直接webpack打包，多生成了0.bundle.js文件
//wepack 输出
Asset Size Chunks Chunk Names
0.bundle.js 307 bytes 0 [emitted]
bundle.js 2.45 KiB main [emitted] main
index.html 187 bytes [emitted]
demo 11：Code splitting with bundle-loader
这个与demo10 一样，npm install bundle-loader后直接更改 main.js
// main.js
// Now a.js is requested, it will be bundled into another file
var load = require('bundle-loader!./a.js');
// To wait until a.js is available (and get the exports)
// you need to async wait for it.
load(function(file) {
document.open();
document.write('
' + file + '
');
document.close();
});
直接webpack打包：效果是相同的
Asset Size Chunks Chunk Names
0.bundle.js 307 bytes 0 [emitted]
bundle.js 2.45 KiB main [emitted] main
index.html 187 bytes [emitted]
demo12:Common chunk
是自动将相同代码打包成一个common.js
这里需要说明，阮神的做法在webpack4中已经废弃了，现在可以直接使用，更改webpack.config.js
var HtmlwebpackPlugin =
