webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。
接下来我们从 0 开始，一步一步实现我们的打包，作为入门，希望大家有所收获。

源码地址，欢饮 Star[https://github.com/WangDeTao/…]

整体项目模块介绍

- 00simple（只包含简单的 js 文件打包）- 01simple-dev-server（本地的服务，包含 js，css，图片，html，增加 loader,plugin,derServer）- 02simple-production（打包成生产环境静态资源）- css（css 文件）- imgs(图片文件)
- js(js 文件 one.js/two.js)
- static(viewport.js, 在 index.html 引入)

00simple 介绍

首先用 npm init 来初始化管理我们的项目，接着安装 webpack 和 webpack-cli；

npm init -y
npm install -D webpack webpack-cli

安装完成以后，创建 webpack.config.js 文件，配置好入口和出口;

<font color=red> 注意：</font> 出口需要指定文件名和路径，其中__dirname 表示当前文件所在目录的完整目录名

const path = require('path')
module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./bundle')
    }
}

执行打包命令 npx webpack 就可以看到如下图生成了 bundle 文件夹，执行 node bundle/bundle.js 会看到输出了 index.js 里面到处的对象

<font color=red> 注意：</font> npx 会帮你执行依赖包里的二进制文件。

但是更多的时候我们是希望通过 ’npm run xxx’ 的形式来打包，这个时候也很简单，只需要在 package.json 的 script 下面添加

"scripts": {"00simple": "webpack --config webpack.config.js"}

接着在 terminal 输入 ’npm run 00simple’ 即可,run 是 run-script 的简写。

01simple-dev-server 介绍

这一章节我们将会增加 loader，plugin 和 devServer 的内容。

loader 和 plugin 的区别

• loader 用于对模块的源代码进行转换，比如 es6/ 7 转 es3，less/sass 转 css 等
• plugin 用于扩展 webpack 的功能，比如压缩混淆，整合 html 和 js，复制文件等

本章节的 loader 和 plugin

• style-loader/css-loader 处理 css
• file-loader 处理图片
• html-webpack-plugin 整合 html 和打包的 js 文件

首先安装上述提到的 loader

npm install -D style-loader css-loader file-loader

同时在 webpack.config.js 增加 module 并且 在 index.js 引入 css 和图片，并将图片添加到 html 中。

    module:{
        rules:[{test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.(png|jpg|gif)$/,use:['file-loader']}
        ]
    }

import  '../css/main.css'
import honey from'../imgs/honey.png'

let img = new Image();
img.src = honey;
document.body.appendChild(img) // 图片添加到页面

其中 test 表示匹配的正则，use 使我们需要使用的 loader。

接着在 package.json 增加 “01simple-dev-server”: “webpack –config webpack.config.js”
执行 npm run 01simple-dev-server，我们发现 bundle 下面多了一张图片，如下

那么怎么将 html 和打包的 js 结合起来呢？？？我想跑起来看一下啊，没有页面不直观啊。

好的，接下来我们安装 html-webpack-plugin 插件，接着安装 webpack-dev-server；

npm install -D html-webpack-plugin
npm install -D webpack-dev-server

接着创建一个 html 文件，并在 webpack.config.js 里面增加

const HtmlWebpackPlugin = require('html-webpack-plugin')


plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html', // 文件名
        template:'../index.html'// 模板
    })
],
devServer:{
    hot:true,
    port:3000
}

在 package.json 里面增加一行命令，”dev”: “webpack-dev-server –open –config webpack.config.js”

接着运行 npm run dev，见证奇迹的时候到了，我们的浏览器自动打开了

HtmlWebpackPlugin 可以简单的理解为将我们打包好的 js 与我们的模板 html 整合一起

devServer 帮助我们起一个本地的服务器，同时可以增加 port 端口等相关属性

本章节 webpack.config.js 完整代码如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'bundle')
    },
    module:{
        rules:[{test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.(png|jpg|gif)$/,use:['file-loader']}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'../index.html'
        })
    ],
    devServer:{
        hot:true,
        port:3000
    }
}

02simple-production 介绍

生产环境的包我们会去掉提示，会压缩处理我们的代码，接下来我会多安装一个插件 clean-webpack-plugin 插件，可以帮助我们打包前先清除 dist，当然你还可以自行安装诸如 copy-webpack-plugin 等插件

npm install -D clean-webpack-plugin

接下来看下我们的 webpack.pro.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')// 清除 bundle
module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'bundle')
    },
    module:{
        rules:[{test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.(png|jpg|gif)$/,use:['file-loader']}
        ]
    },
    plugins:[new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                filename:'index.html',
                template:'../index.html',// 可指定模板，可省略
                inject:true,
                minify: { // 压缩 HTML 文件
                    removeComments: true, // 移除 HTML 中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联 css
                }
            }),
    ]
}

增加了 CleanWebpackPlugin 插件 同时 对 html 进行压缩，移出注释等处理。

最后别忘了更改 package.json 里面的命令 “build”: “webpack –config webpack.pro.js”，执行 npm run build

在我们的文件夹下会生成一个 bundle 文件，大功告成。

总结：
通过上面的步骤，我们基本了解也实现了自己的打包。webpack 中主要包含 entry,output,module,plugin，当然还有 mode,resolve,devServer 等让我们进一步去了解，本篇作为入门，希望您有所收获。

源码地址，欢饮 Star[https://github.com/WangDeTao/…]