WEBPACK简介
Webpack 是一个强力的模块打包器。 所谓 包 (bundle) 就是一个 JavaScript 文件,它把一堆 资源 (assets) 合并在一起,以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript 、 CSS 样式、 HTML 以及很多其它类型的文件。
1、安装
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
我们通过一个 JavaScript 配置文件 webpack.config.js
来决定 Webpack 做什么以及如何做。
2、入口与输出
entry: {
app: 'src/app.ts'
}
Webpack 探查那个文件,并且递归遍历它的 import
依赖。
output: {
filename: 'app.js'
}
这个 app.js
输出包是个单一的 JavaScript 文件,它包含程序的源码及其所有依赖。 后面我们将在 index.html
中用 <script>
标签来加载它。
3、多重包
entry: {
app: 'src/app.ts',
vendor: 'src/vendor.ts'
}, output: {
filename: '[name].js'
}
在输出文件名中出现的 [name]
是一个 Webpack 的 占位符 ,它将被替换为入口点的名字,分别是 app
和 vendor
4、加载器
loaders: [
{
test: /\.ts$/
loaders: 'ts'
},
{
test: /\.css$/
loaders: 'style!css'
}
]
当 Webpack 遇到像这样的 import
语句时……
import { AppComponent } from './app.component.ts';
import 'uiframework/dist/uiframework.css';
它会使用 test
后面的正则表达式进行模式匹配。
5、插件
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
我们已经了解webpack的基本配置了,那么我们开始
6、完整配置
module.exports = {
entry: './index.js',
devtool: 'source-map',
output: {
filename: '[name].js'
},
resolve: {
alias:{ jquery: 'src/lib/jquery.js', }
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react'
}),
new WebpackNotifierPlugin()
],
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.less$/,
loaders:['style-loader', 'css-loader','less-loader']
}, {
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
test: /\.html/,
loader: "html-loader?" + JSON.stringify({minimize: false })
} ]
}
};
WEBPACK简介的更多相关文章
- Webpack 2 视频教程 001 - Webpack 简介
这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的. 这个基本就是目前 ...
- webpack简介与使用
欢迎小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr...前端导航平台访问 CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规 ...
- 前端工程化-webpack简介(一)
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- webpack使用笔记
webpack简介 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等适用于前端.np ...
- Vue.js——webpack
Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...
- 如何开发webpack loader
关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...
- webpack模块化管理和打包工具
Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...
随机推荐
- 11.12模拟考T1(可持续优化)PS:神奇的东西
1.数列操作 (array.pas/c/cpp) [问题描述] 现在有一个数列,最初包含0个数.现在要对数列操作n次,操作有3类. 1) a k,在数列的最后插入一个整数k 2) s 将最近插入的 ...
- Interpolation in MATLAB
Mathematics One-Dimensional Interpolation There are two kinds of one-dimensional interpolation i ...
- cpp项目的组织
编译篇 较大型cpp项目的代码组织.编译都是深耦合的. 一般提供一个总体的makefile,进入各个模块,又有自己的makefile,这些makefile又都依赖于一些被include的文件的的定义, ...
- Mysql 查看版本号
1.mysql> status; 2.select version(); mysql> select version();+------------+| version() |+----- ...
- Android日常开发总结的技术经验60条 转
1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2. 数据库表段字段常量和SQL逻辑分离,更清 ...
- web三种跨域请求数据方法
以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head> < ...
- 打开页面自动打开QQ的javascript代码
今天浏览个网站,发现我的QQ突然自动启动了,起初还以为中病毒了,后来找了半天无果,反而发现了几个无需启动的系统服务进程,遂管之. 后来打开网站的页面的源代码,发现一段javascript脚本,才知道我 ...
- LeetCode "Third Maximum Number"
Straight-forward strategy.. please take care of all details - data type, assignment order etc. class ...
- Digests from CG articales
Turtle Talk Prior to the on-set motion capture, the team had the actors perform expressions while be ...
- 通过开户银行账号查询客商名称 sql
select * from bd_cubasdoc where pk_cubasdoc in ( ') 查询空客商客户银行的单位名称 select b.custcode,b.custname, d.b ...