1.Concepts:

webpack is a module bundler for modern JS applications. Since there are lots of complex JS code and dependencies of files.

2. Entry:
webpack provide a graph of application dependencies, the starting point is known as the entry point, which tells webpack where to start and follows the graph of dependencies to know what to bundle.

Can be specified in webpack.config.js:

  entry: "./app/entry", // string | object | array
entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
// Here the application starts executing
// and webpack starts bundling

3. Output

Once you've bundled your assests together, we need to tell webpack where to bundle our application. the "output" property tells webpack how to treat bundled code.

Can be specified in webpack.config.js:

var path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

Through output.filename and output.path, we're describing to webpack the name of our bundles, and where we want to emit it.

4. Loaders:

Goal is have all the assets in your project to be webpack's concern instead of browser's. This does not mean that we have to bundle all files together.

webpack treats every file(.css, .js, .html, .scss) as a module, but webpack only understand javascript.

Loaders in webpack transform these files into modules, as they are added to your dependency graph.

They have two purpose in your webpack config:

1) Identify what files should be transformed by a certain loader.(test property)

2) Tansform that file so that it can be added to the dependency graph(and eventually your bundle).(use property)

Can be specified in webpack.config.js:

var path = require('path');

const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
}; module.exports = config;

In the above configuration, we defined a rule property for a single module, with required two properties: test and rules, this tells webpack compiler the following:

"Hey webpack compiler, when you come across a path that resolves to a '.js' or '.jsx' file inside of a require()/import statement, use the babel-loader to transform it before you add it to the bundle".

Important: define rules in modules.rules, not in rules.

5. Plugins:

Since Loaders execute per-file, plugins are backbones of webpack. A webpack plugins is a JS object that has an apply property, This apply property is called by the webpack compiler, give access to entire compilication process

i.e. Customize the webpack build process in a variety of ways.

If we want to use plugins or loaders, install them through npm, and then add instances in "plugins"(an array) properties .

var webpack = require('webpack')
// importing plugins that do not come by default in webpack
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin'); // adding plugins to your configuration
plugins: [
// build optimization plugins
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-[hash].min.js',
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
}),
new ExtractTextPlugin({
filename: 'build.min.css',
allChunks: true,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// compile time plugins
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
// webpack-dev-server enhancement plugins
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
]

查看错误信息:

webpack --display-error-details

打包:

webpack --config webpack.config.js

填坑webpack的更多相关文章

  1. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  2. 各种报错各种坑 webpack让我在学习的过程中一度想要放弃

    由于拓展部分不是必须的,只是可以增强用户体验,但是有些时候页面给分页预留的位置不够,这个时候我们就可以通过设置来除去这一部分 子分区由两种创建方法,一种是不定义每个子分区子分区的名字和路径由分区决定, ...

  3. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  4. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

  5. Vue填坑(1)----通过vue-cli,认识vue-router

    开始 首先,确保之前已经安装过 npm 和 nodejs(为了避免版本的问题,最好使用较新的版本). 全局安装 vue-cli : npm install -g vue-cli 新建文件夹 my-pr ...

  6. Android—基于微信开放平台v3SDK,开发微信支付填坑。

    接触微信支付之前听说过这是一个坑,,,心里已经有了准备...我以为我没准跳坑出不来了,没有想到我填上了,调用成功之后我感觉公司所有的同事都是漂亮的,隔着北京的大雾霾我仿佛看见了太阳~~~好了,装逼结束 ...

  7. css 填坑常用代码分享

    以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/mast ...

  8. 填坑系列:通过ESXi来配置IPMI

    近日西安的天气很不错,可是看到从其他地方迁移来的主机在新环境下无法远程调试怪郁闷的,这就需要填坑,要不就会给后来者挖更大的坑. 今天遇到的坑是在IPMI的网络设置里面启用了VLAN标签之后,在新环境下 ...

  9. Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)

    这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angular ...

随机推荐

  1. Python-学习-import语句导入模块

    简单的学习一下调用外部的模块文件. 在Python中,模块是一种组织形式,它将彼此有关系的Pyrhon 代码组织到一个个独立的文件当中,模块可以包含可执行代码,函数,和类或者是这些东西的组合. 当我们 ...

  2. 数据挖掘算法:k-means算法的C++实现

    (期末考试要到了,所以比较粗糙,请各位读者理解..) 一.    概念 k-means是基于原型的.划分的聚类技术.它试图发现用户指定个数(K)的簇(由质心代表).K-means算法接受输入量K,然后 ...

  3. 线段树——hdu1166敌兵布阵

    一.题目回顾 题目链接:敌兵布阵 Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个 ...

  4. Mininet实验 基于Mininet测量路径的损耗率

    实验原理 在SDN环境中,控制器可以通过对交换机下发流表操作来控制交换机的转发行为,此外,还可以利用控制器测量路径的损耗率.在本实验中,基于Mininet脚本,设置特定的交换机间的路径损耗速率,然后编 ...

  5. 查看lwjgl常用状态的值

    在遇到状态值较多较复杂的情况,可以选择使用GL11.glIsEnabled()或者GL11.glGet()函数来查看状态机值,以下是常用值: public static void printOpenG ...

  6. linux文件系统(ext2)

    一个磁盘可以划分成多个分区,每个分区必须先用格式化工具(例如某种mkfs命令)格式化成某种格式的文件系统,然后才能存储文件,格式化的过程会在磁盘上写一些管理存储布局的信息.下图是一个磁盘分区格式化成e ...

  7. 配置Mac自带的Apache http服务器

    Mac系统是自带Apache,所以很方便我们做一些http测试. 我可以先启动默认的服务器 $ sudo apachectl start 在浏览器打开:http://localhost 将会看到下面信 ...

  8. 【bzoj2006】[NOI2010]超级钢琴 倍增RMQ+STL-堆

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中A ...

  9. BZOJ4544 椭圆上的整点(数论)

    https://www.cnblogs.com/Gloid/p/9538413.html 基本思路没有太大差别.得到2n=d(a2+3b2),其中d=gcd(n-x,n+x),n-x==a2& ...

  10. hdu6103 Kirinriki(trick+字符串)

    题解: 考虑一开始时,左边从1开始枚举,右边从n开始枚举 我们可以得到一个最大的值k. 但是如果这样依次枚举,复杂度肯定是n^3,是不行的 考虑如何利用上一次的结果,如果我们把1和n同时去掉 就可以利 ...