web pack

webpack 是什么?

webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

webpack 有哪些重要特征?

插件化:webpack本身非常灵活,提供了丰富的插件接口。基于这些接口,webpack开发了很多插件作为内置功能。
速度快:webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的,尤其是增量更新。
丰富的Loaders:loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
高适配性:webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码,自动帮你管理他们的依赖关系。此外,webpack对第三方库的兼容性很好。
代码拆分:webpack可以将你的代码分片,从而实现按需打包。这种机制可以保证页面只加载需要的JS代码,减少首次请求的时间。
优化:webpack提供了很多优化机制来减少打包输出的文件大小,不仅如此,它还提供了hash机制,来解决浏览器缓存问题。
开发模式友好:webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
使用场景多:webpack不仅适用于web应用场景,也适用于WebworkersNode.js场景

webpack 如何最佳配置?

webpack官方提供的配置方法是通过module.exports返回一个json,但是这种场景不灵活,不能适配多种场景。
比如要解决:production模式和development模式,webpack的配置是有差异的,大致有两种思路。
1、两份配置文件webpack.config.production.js/webpack.config.development.js,然后不同场景下,使用不同的配置文件。
2、通过module.exports返回函数,该函数能接受参数。

相对来说,第一种更简单,但是重复配置多;第二种更灵活,推荐第二种方式。
那么,按返回函数的方式的配置代码架子如下:

module.exports = function(env) {
    return {
        context: config.context,
        entry: config.src,
        output: {
            path: path.join(config.jsDest, project),
            filename: ‘[name].js‘,
            chunkFilename: ‘[name].[chunkhash:8].js‘,
            publicPath: ‘/assets/‘ + project + ‘/‘
        },
        devtool: "eval",
        watch: false,
        profile: true,
        cache: true,
        module: {
            loaders: getLoaders(env)
        },
        resolve: {
            alias: getAlias(env)
        },
        plugins: getPlugins(env)
    };
}

其中关键的配置这儿简单介绍如下,后续的系列博客会根据每个点详细介绍。
context:上下文。
entry:入口文件,是所有依赖关系的入口,webpack从这个入口开始静态解析,分析模块之间的依赖关系。
output:打包输出的配置。
devtools:SourceMap选项,便于开发模式下调试。
watch:监听模式,增量更新,开发必备!
profile:优化。
cache:webpack构建的过程中会生成很多临时的文件,打开cache可以让这些临时的文件缓存起来,从而更快的构建。
module.loaders:如前文介绍,loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
resolve.alias:模块别名,这样可以更方便的引用模块。
plugins:如前文介绍,webpack的一些内置功能均是以插件的形式提供。

webpack和gulp的区别

gulp是基于流的构建工具:all in one的打包模式,输出一个js文件和一个css文件,优点是减少http请求,万金油方案。
webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、打包、按需加载等。

时间: 2024-08-05 14:14:26

web pack的相关文章

web pack的使用事项

一开始把webpack想的很难,很复杂,哈哈. 其实写的好的东西真的是越简单,越简单的东西其实越难写. 按照How to一步一步基本就能理解,webpack怎么使用了, 后面就是如何帮程序一步一步找到适配器. 但是也会遇到一些坑,需要我们一一跨过 比如: Parser.pp.raise ,遇到这样的问题基本都是babel没有升级. "devDependencies": { "babel-core": "latest", "babel-l

web pack备忘

全局安装:npm install webpack -g npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象 i 是install 的简写 -S就是--save的简写-D就是--save-dev 这样安装的包的名称及版本号就会存在pac

html-webpack-template, 一个更好的html web service插件

源代码名称:html-webpack-template 源代码网址:http://www.github.com/jaketrent/html-webpack-template html-webpack-template源代码文档 html-webpack-template源代码下载 Git URL: 复制代码 git://www.github.com/jaketrent/html-webpack-template.git Git Clone代码到本地: 复制代码 git clone http:/

零基础学习web前端,大神给你们指路

随着web前端的飞速发展,学习web前端的人员也是越来越多,在移动 互联网 时代,相信我们每个人的手机上都装有数十个APP,这些APP的开发其实也和当下热门的 Web 前端开发息息相关. 事实上,如今一半以上的APP都是采用Hybrid混合模式开发,即结合安卓和Web端技术开发.而纯 Web开发 的APP也不在少数,比如我们众所周知的 QQ 空间就是使用 Web前端 的React Native技术开发.除了APP,我们在手机端常看到的H5页面,也是主要运用了Web端的 HTML5 技术开发. 当

前端基础(一)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000;

vue搭建开发环境

一. 首先确保安装了node.js,安装了node.js就安装了npm 在将要开始项目文件夹的文件夹中,对于路径study/project,如果项目文件夹是project,就在study下git bash 二.如果网速快不用安装淘宝镜像,如果网速不支持npm,就安装cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 三.安装webpack Web pack用来将vue组件中的.vue文件打包成.js文件,从而

webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.toutiao.com/i6612879647568822788/ 我这里可以在回顾一下这个web pack的hello world项目. 用webpack打包之后,项目文件夹里包含了这些资源: index.html的源代码很简单,就包含了一个webpack打包后生成的bundle.js文件: 那么运行

VUE 一些环境配置

1. 安装  nrm 一键切换npm源 npm i nrm -g       [安装命令工具] nrm ls                 [罗列出所有的源] nrm use taobao  [使用taobao的源] 安装完后, 以后的装包工具 直接用 npm 就行了 2. 安装 cnpm  npg i cnpm -g 3. webpack 官网:  https://webpack.github.io/ 中文:   https://www.webpackjs.com/ 全局安装(推荐)  np

webpack基础知识

一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webpack-cli Npm 5.2以上的版本中提供了一个npx命令 npx想要解决的主要问题.就是调用项目内部安装的模块.即就是在node_modules下的.bin目录中找到对应的命令执行 使用webpack命令: npx webpack Webpack4.0之后可以实现0配置打包构建.0配置的特点就