关于webpack的完整学习

时间 2019-12-07

标签关于 webpack 完整学习繁體版

原文原文链接

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

为何要使用webpack

JavaScript和CSS的依赖问题。开发过程当中，JavaScript和CSS的在页面中的顺序问题，常常会形成CSS没起做用，JavaScript的某个变量和方法找不到。
性能优化。通常浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤为是为了前端项目的代码更清晰，结构更合理，咱们采用了MVC，MVVM等不少架构分解出了不少JS文件，无疑又拖慢了网页的速度。为了解决这个问题，通常会采用如下两个方案：
(1)、文件合并。浏览器须要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件。当须要加载的文件很是多，网页的性能可想而知，因此咱们须要合并多个文件以减小文件的数量。
(2)、文件压缩。咱们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格，换行这些都是为了让咱们读代码时更容易阅读，可是对机器来讲，这些对它没有影响。
提升开发效率。主要体如今：
(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类的工具。css

loader

webpack自己只能加载js/json模块，若是要加载其它类型的文件/模块, 就须要使用对应的loader进行转化和加载。
loader能够将全部类型的文件转换为webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。
loader通常以 xxx-loader 的方式命名，xxx表明了这个loader要作的转化功能，好比：css-loader，json-loader等。html

webpack安装

全局安装：npm i webpack -g
项目依赖：npm i webpack --save-dev前端

简单示例

webpack01.htmljava

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

test.jsjquery

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

经过命令打包：webpack

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

打包完成后项目下多出dist文件夹，把webpack01.html拷贝进去，在页面上访问，能够出现相同效果

webpack把全部依赖打包成一个bundle.js文件，经过代码分割成单元片断并按需加载。关于webpack打包原理学习于：https://blog.csdn.net/baozhiq...web

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...npm

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便可。