文档章节

webpack

_
 _Rui_
发布于 2017/07/19 22:47
字数 452
阅读 3
收藏 0

参考资料

重要概念

  • 每个文件都是一个module,通过import, require, url可以引入其他模块,引入模块的方式十分的灵活
  • An ES2015 中的 import
  • A CommonJS 中的require()
  • An AMD 中的define and require
  • a css/sass/less file 中的@import
  • An image中的 url in a stylesheet (url(...)) or html (<img src=...>) file.
  • entry:模块的入口,定义从哪个模块开始构建依赖关系
  • output:编译后的出口,告诉webpack如何进行打包
  • loaders:加载器,通过定义testuse两个字段来决定不同的文件用哪种加载器进行加载
  • plugins:插件用来执行具体的动作
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

entry

output

  • “__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

loaders

  • test:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);

常用loaders

  • css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能
  • style-loader将所有的计算后的样式加入页面中

plugins

主要作用是用来拓展webpack的功能

常用插件

HtmlWebpackPlugin

这个插件的作用是依据一个简单的模板,帮你生成最终的Html5文件,这个文件中自动引用了你打包后的JS文件

http://www.cnblogs.com/haogj/p/5160821.html

Hot Module Replacement

模块热部署插件

© 著作权归作者所有

上一篇: npm
下一篇: webpack与babel结合
_
粉丝 3
博文 21
码字总数 7455
作品 0
成都
私信 提问
webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc
2017/06/23
0
0
Webpack 、git常用命令总结

一、Webpack 常用命令总结 npm install webpack -g // 全局安装webpack npm init -y //初始化默认的package.json文件 npm install webpack --save-dev //下载webpack插件到node_modules 并在......

菜鸟的进阶
2017/10/19
0
0
Webpack入门到精通(1)

前言 什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中...

励步前端团队
昨天
0
0
从 Sprockets 迁移到 Webpacker(上)

从 Sprockets 迁移到 Webpacker(上) 脱线道士维克多2017-12-222 阅读 javascript 为何要迁移 当年 Asset Pipeline 在 Rails 3.1 出现的时候确实很惊艳,但是近年来前端社区越来越火热,在大...

脱线道士维克多
2017/12/22
0
0
gulp与webpack-stream集成配置

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢?这篇文章就是讲述如何集成gulp和webpack 1.安装webpack-stream 很重要的插件,当然也...

WolfX
2016/05/12
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部