关于webpack的完整学习

TurnerPrima 发布于1年前
0 条问题

终于学习了一下webpack
webpack 是前端的一个项目构建工具,它是基于Node.js开发出来的一个前端工具。WebPack可以看做是模块打包机(bundler),通过分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

为什么要使用webpack

  1. JavaScript和CSS的依赖问题。开发过程中,JavaScript和CSS的在页面中的顺序问题,经常会造成CSS没起作用,JavaScript的某个变量和方法找不到。
  2. 性能优化。一般浏览器请求的文件越多越耗时,请求的文件越大越耗时,尤其是为了前端项目的代码更清晰,结构更合理,我们采用了MVC,MVVM等很多架构分解出了很多JS文件,无疑又拖慢了网页的速度。为了解决这个问题,一般会采用以下两个方案:
    (1)、 文件合并。浏览器需要下载多个JS文件,而浏览器是有并发限制,也就是同时并发只能下载几个文件。当需要加载的文件非常多,网页的性能可想而知,所以我们需要合并多个文件以减少文件的数量。
    (2)、 文件压缩。我们知道文件越大,下载越慢,而针对JavaScript和CSS,里面的空格,换行这些都是为了让我们读代码时更容易阅读,但是对机器来说,这些对它没有影响。
  3. 提高开发效率。主要体现在:
    (1)、 Vendor前缀。在CSS3使用越来越多的时候,我们都知道一些CSS3的新特性,在不同的浏览器中,CSS有不同的前缀,如果我们手工添加将会很繁琐,而如果使用构建工具,很多构建工具可以自动给我添加CSS的Vendor前缀。关于vendor前缀的学习
    (2)、单元测试。JavaScript的单元测试在使用MVC或者MVVM的框架后,变得越来越容易,而单元测试是质量保证的一个很重要的手段,所以在提交之前,使用构建工具自动跑一遍我们的单元测试是非常有必要的,能进一步检测你的项目的健壮性和容错能力。关于MVVM的学习
    (3)、代码分析。我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号,某个变量没有等等,使用一些JavaScript的代码分析工具,可以很好的帮我们检查一些常见的问题。
    (4)、版本升级。

Grunt和Gulp

Gulp/Grunt是基于task任务的一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,是基于整个项目进行构建的。Gulp/Grunt在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。如图:
图片描述
而webpack把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。如图:
图片描述
Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

loader

webpack本身只能加载js/json模块,如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
loader可以将所有类型的文件转换为webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
loader一般以 xxx-loader 的方式命名,xxx代表了这个loader要做的转化功能,比如:css-loader,json-loader等。

webpack安装

全局安装:npm i webpack -g
项目依赖:npm i webpack --save-dev

简单示例

webpack01.html

<body>
    <div id="test">
        哈哈哈
    </div>
    <script type="text/javascript" src="js/test.js"></script>
</body>

test.js

import $ from 'jquery';
import '../css/common.css';
$(function () {
    $('#test').addClass("test");
});

通过命令打包:

webpack js/test.js --output dist/bundle.js --mode development

打包完成后项目下多出dist文件夹,把webpack01.html拷贝进去,在页面上访问,可以出现相同效果
图片描述
图片描述
webpack把所有依赖打包成一个bundle.js文件,通过代码分割成单元片段并按需加载。关于webpack打包原理学习于:https://blog.csdn.net/baozhiq...

webpack配置文件

除了以上通过命令来打包,还可以通过配置文件配置webpack的入口文件等等信息,在终端直接执行webpack即可打包。
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
    // 入口文件配置
    entry: './js/test.js',
    // 输出配置
    output: {
        // 出口文件
        filename: 'bundle.js',
        // 设置全路径
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        // 规则数组, 里面的每一个对象都是在描述一个loader
        rules: [
            {
                //css文件加载,正则表达式css文件的路径
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                ////图片文件加载
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        query: {
                            name: 'img/[name]-[hash:5].[ext]'
                        }
                    },
                ],
            },
        ]
    },
    devServer:{
        contentBase: './dist'
    }
};

关于配置文件详解来自于:https://blog.csdn.net/qq_3977...

css文件打包

webpack打包css文件需要添加style-loader和css-loader模块:npm install css-loader style-loader --save-dev(或者通过配置文件引入)
css-loader让我们能使用类似@import和url(...)的方法实现require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起能够把样式表嵌入webpack打包后的JS文件中。关于测试代码,上面示例已展示。

webpack插件

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。

HtmlWebpackPlugin

该插件依据一个简单的模板,帮你生成最终的Html5文件,这个文件中自动引用了你打包后的JS文件。
通过`npm install --save-dev html-webpack-plugin命令安装。
webpack.config.js的配置:
图片描述
使用:删除掉原先打包编译生成的dist文件夹,重新执行webpack,该插件会自动根据指定的模板页面帮助我们创建index.html文件,并做好相关配置引入。

自动编译打包

webpack-dev-server提供了一个简单的web服务器,并且能够实时重新加载(live reloading)。
通过npm install --save-dev webpack-dev-server命令安装。
webpack.config.js的配置:
图片描述
编译打包:
package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "babel js --out-dir lib"
 }

终端执行npm start即可。

查看原文: 关于webpack的完整学习

  • organicbutterfly
  • tinylion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。