本文涉及到的知识点:
- webpack的长处与特色
- webpack基础知识
- package.json
零、What is Webpack?
1. What?
- Webpack可以看做是模块打包机：分析项目结构，找到JavaScript模块以及其他的一些预设，打包为合适的格式以供浏览器使用。
- Webpack的工作方式是：把项目当做一个整体，通过一个主文件（如index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最好打包为一个浏览器可识别的JavaScript文件。
2. Why?
- 模块化： 把复杂的程序细化为小的文件
- 使我们能够实现目前版本JavaScript不能直接使用的特性，并且之后还能能转换为浏览器可以识别的JavaScript文件
- Scss、Less等CSS预处理器
一、Getting Started
1. 安装
mkdir webpack-demo && cd webpack-demo //创建并打开根目录
npm init -y //初始化package.json文件
npm install --save-dev webpack //安装webpack并加入配置文件列表
2. 利用webpack指令简单打包
将source code(./src)与distribution code(./dist)分离，source code由我们编辑，distrbution code是我们构建过程总的最优化输出，并且distrbution code是被浏览器加载的最终文件。
- 项目结构
webpack-demo
|- package.json
|-node_modules
|- /dist //source code
|- index.html
|- /src //distribution code
|- index.js
-
打包
./node_modules/.bin/webpack src/index.js dist/bundle.js 输出结果
output_1
3. Using a Configuration
通过使用配置文件代替直接的配置指令
- 项目结构
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
- webpack.congig.js
const path = require('path');
module.exports = {
entry:'./src/index.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
}
};
- 输出结果
output_2
二、package.json
1. JSON对象速览
- JSON(JavaScript Object Notation,即JavaScript 对象表示法)是一种用于数据交换的文本格式
- 具有两个显著优点：1. 书写简单，一目了然；2. 符合JavaScript原生语法，可以直接由解析引起处理，不需另加解析代码。
- 每个JSON文档只包含一个值，要么是简单类型的值，要么是复合类型的值
方法
- JSON.stringify(par1,par2,par3)：将一个值转为字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原
- obj.toJSON()：如果有对象有自定义的toJSON方法，则JSON,stringify会使用这个方法的返回值作为参数
- JSON.parse()：用于将JSON字符串转化成对象
2. package.json
package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
-
scripts
scripts指定了运行脚本命令的npm命令行缩写
eg:
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
-
dependences&&devdenpendences
dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。
它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。
install express --save //--save参数表示将该模块写入dependencies属性
install express --save-dev //--save-dev表示将该模块写入devDependencies属性
bin
bin项用来指定各个内部命令对应的可执行文件的位置，在node_modules/.bin/目录下建立符号链接。config
config字段用于添加命令行的环境变量。
三、Loaders
webpack把所有的文件当成(.css .html .less .jpg .etc)当做一个module,可是webpack自身只能理解Javascript，因此需要loader作为各个模块资源的转换器，loader本身实质上是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、JSX、LESS或图片。
1.Loader features
- Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript；
- Loader可以同步或异步执行；
- Loader运行在node.js环境中，所以可以做任何可能的事情；
- Loader可以接受参数，以此来传递配置项给loader；
- Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
- Loader可以通过文件 npm 来进行发布和安装；
- 除了通过 package.json 的 main 指定，通常的模块也可以导出一个loader来使用；
Loader可以访问配置； - 插件可以让loader拥有更多特性；
- Loader可以分发出附加的任意文件。
2. Resolve loaders
- Loader本身也是运行在node.js环境中的JavaScript模块，它通常会返回一个函数。大多数情况下，我们通过npm来管理loader，但是你也可以在项目中自己写loader模块；
- 按照惯例，而非必须，loader一般以 xxx-loader ，xxx 代表了这个loader要做的转换功能，比如 json-loader；在引用loader的时候可以使用全名 json-loader 或者使用短名 json。这个命名规则和搜索优先级顺序在webpack的 resolveLoader.moduleTemplates api中定义。
3.installation
npm install --save-dev css-loader
npm install --save-dev ts-loader
4.Using Loaders
使用loaders的三种方法：1.configuration 2.inline 3.CLI
- configuration(recommended)
module: {
rules: [ { test: /\.css$/,
use: [ { loader: ['style-loader'] },
{ loader: ['css-loader'] , options: { modules: true } } ] } ] }
- inline
-
!为使用loader的标记，!前为loader模块名称，!后为需要编译的文件. - loader模块既可以使用相对路径引用，又可以使用绝对路径引用
- 可以用链式调用，如下例先通过
css-loader，后通过style-loader -
?key=value&foo=bar和?{"key":"value","foo":"bar"}表示所设参数
import Styles from 'style-loader!css-loader?modules!./styles.css';
- CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
5.使用loader加载顺序
四、Plugins
利用plugins可以执行许多loaders无法实现的操作和自定义功能，plugins有两种获取途径：一种是webpack本身内置的，另一种需要通过npm安装第三方插件。
使用plugins，你需要：
1.在头文件引入require模块；
2.在module.exports中引入plugins数组。
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //安装第三方插件
const webpack = require('webpack'); //获取内置插件
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]//需要用new操作符创建新对象
五、Webpack CLI
参考资料
