webpack简介及实践

Posted 2021-04-29 前端技术博文

一、webpack是什么

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

二、 webpack整体架构

以webpack.config.js为主要部分进行划分

entry: 入口，定义整个编译过程的起点
output: 输出，定义整个编译过程的终点
module: 定义模块module的处理方式
plugins：插件，对编译完成后的内容进行二度加工
resolve.alias 定义模块的别名

示例：

//webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');  //分离CSS和JS文件
const CleanWebpackPlugin = require('clean-webpack-plugin');     //去除build文件中的残余文件
const path = require('path');
const webpack=require('webpack');
let pathsToClean = [
    'dist'
]
module.exports = {
    entry: {  //唯一入口文件
        "app.bundle": "./src/app.js",
        "contact": "./src/contact.js"
    },
    devServer: {  //配置本地服务器
        port: 8686,  //端口号
        open: true,  //设置是否自动打开
        hot:true     //模块热替换，热更新
        //inline:true   //实时刷新
    },
    output: {  //输出文件
        path: path.resolve(__dirname, 'dist'),  //打包后的文件存放的地方
        filename: '[name].[hash].js'   //打包后输出文件的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({    //new 一个插件的实例，并传入相关的参数
            // title:'hello world'   //自动添加HTML的标题
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            //excludeChunks代表的不包含
            excludeChunks: ['contact']
        }),
        new HtmlWebpackPlugin({
            template: './src/contact.html',
            filename: 'contact.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            //chunks代表的是包含
            chunks: ['contact']
        }),
        new CleanWebpackPlugin(pathsToClean),
        new ExtractTextPlugin({
            filename:'style.css',
            disable:true
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()   //自动刷新实时预览修改后的效果
        //new webpack.optimize.UglifyJsPlugin()     //压缩JS代码
    ],
    module: {
        rules: [
            {
                test: /\.css$/,   //用以匹配loaders所处理文件的拓展名的正则表达式
                use: ['style-loader','css-loader','postcss-loader']    //style-loader要配置在css-loader之前
            }
        ]
    }
}

entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

三、优势

• webpack 不仅能处理 js, 也能处理 css, 还能处理 html，甚至是图片等各种前端资源；

• 开发便捷，仅仅使用一个配置文件，就能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转 base64等；

• 扩展性强，插件机制完善。

四、使用

1、安装node.js

下载安装包后，点击可执行文件，不断地按下一步，就可以安装成功。

测试安装是否成功，使用 node  -v，如果显示版本号则表示安装成功。

2、全局安装webpack

在命令行上输入以下命令：npm install -g webpack，测试是否安装成功输入 webpack -v，如果显示版本号则安装成功。

image.png

npm 是 nodejs 管理插件用的工具，install 表示安装，-g 表示全局安装。

3、初始化项目文件

在任意盘符新建一个文件夹，如在D盘创建webpackDemo文件夹；

之后你会看到提示输入一些内容，这不用管，直接全部回车。

创建完成之后，会发现 webpack-test目录下多出了一个名为 package.json 的文件，主要是显示这个项目的名称、版本、作者、协议等信息。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.11.0"
  }
}

4、在项目中安装webpack

在命令行中输入npm install --save-dev webpack

你会看到正在安装 webpack 的进度，稍等片刻，成功之后，我们再来看看 package.json 这个文件的内容，多了下面这几行：

  "devDependencies": {
    "webpack": "^3.11.0"
  }

同时你也会发现，多了一个目录，叫 node_modules，这就是存放刚才安装的 webpack 库所有要用到的源码文件。
如果你使用的是 npm 5，可能还会在目录中看到一个 package-lock.json 文件。

参考：webpack中文网：https://doc.webpack-china.org/