webpack
webpack 简介
- 一款模块加载器兼打包工具
- 支持AMD/CMD写法
- 处理依赖关系，然后解析出模块之间的依赖，将代码打包
- 把各种资源，都作为模块来使用和处理。
- 比如 js css Less Sass等。。。
安装webpack
npm install webpack -g
安装后就在命令行中使用 webpack命令
把依赖写入 package.json
npm install webpack --save-dev
webpack命令
打包命令 webpack entry.js output.js
- entry.js 打包的入口文件
- output.js 打包后的文件
例子：
入口文件: app/index.js
var str = require('./app.js');//通过AMD或CMD语法定义依赖资源
document.body.innerHTML = str;
依赖文件: app/app.js
module.exports = 'hello world';
运行webpack app/index.js bulid/buid.js, 就会将app/index.js和它的依赖app/app.js都打包到同一个文件build/build.js中，所以我们直接调用build/build.js就好
index.html
<script src="build/build.js"></script>
模块加载器(loader)
webpack不只可以打包js, 还可以打包css,图片..等等其他资源， 只是要加载相应的加载器
例子：
入口文件: app/index.js
//通过AMD或CMD语法定义依赖的css资源
//但是需要额外的加载器来处理css, 这里需要两个加载器style-loader和css-loader
//css-loader是用来处理css文件的, style-loader是用来解析css语法的
//加载器的顺序不能打乱，加载器是从右到左依次执行的
require('style-loader!css-loader!./css/style.css');
var str = require('./app.js');
document.body.innerHTML = str;
这样， 我们就把style.css也打包到ouput.js中，再index.html就不需要导入style.css
index.html
<!-- 猜想： css的导入可能是通过output.js动态生成／ -->
<!-- <link rel="stylesheet" href="app/css/style.css"> -->
<script src="build/build.js"></script>
注意： 加载器需要安装，各种不同文件类型的资源, Webpack 有对应的模块 loader
安装加载器
npm install xxx-loader --save-dev
例如：css-loader style-loader 处理css文件和样式
webpack配置文件
webpack有很多参数，有时我们使用配置文件更方便
webpack配置文件取名为 webapck.config.js, 我们在配置文件的相同路径下运行webpakc命令，
就会使用配置文件中的信息作为我们的参数
配置文件说明:
webpack.config.js
module.exports = {
entry: './app/index.js', //打包的入口文件 String|Object
output: {//配置打包结果 Object
path: './build/',//定义输出文件路径
filename: 'build.js', //指定打包文件名称
},
module: {//定义了对模块的处理逻辑
loaders: [//定义了一系列的加载器 Array
{
test: /\.css$/,//正则，匹配到的文件名
//处理匹配到的文件, 这样我们就用js文件写入相应的加载器了
//直接写require('./css/style.css')
}
]
},
resolve:{
//自动补全识别后缀
//require('./css/style'); 可以不用写后缀名了
extensions:['','.js','.css','jsx']
}
}
webpack-dev-server
轻量级的服务器
安装webpack-dev-server
npm install webpack-dev-server -g
安装后在命令行中使用 webpack-dev-server命令
npm install webpack-dev-server --save-dev
把依赖写入 package.json
使用
webpack-dev-server
自动查找同级目录下webpack.config.js配置文件，进行打包操作，并开启服务器
服务器的默认根目录是当前目录，默认端口是8080
index.html
<!-- 注意不是我们配置文件中build/build.js, 因为并不会真的生成， 而是在内存中， 路径为当前路径下 -->
<script src="build.js"></script>
自动刷新
使用命令 webpack-dev-server --hot --inline 做到自动刷新
在webpack.config.js中配置服务
devServer: {
//服务器根目录
contentBase: './build/'
}
注意 ： hot和inline这两个比较特殊， 必须在命令行中写入
自动生成html文件
html-webpack-plugin
在windows下不支持
安装：
npm install html-webpack-plugin --save-dev
使用:
在webpack.config.js中引入
var htmlWebpackPlugin = require('html-webpack-plugin');
在plugins中配置:
plugins:[
new htmlWebpackPlugin({
title:"首页"
})
]
多个打包文件
webpack.config.js
{
entry: {
//键值为模块名
build: './app/index.js',
build2: './app/index2.js'
}
output:{
path: './build/',
name: '[name].js'//将文件名换成[name], 根据定义模块名生成相应的输出
}
}
那我们在生产html的时候就可以指定具体使用哪个模块
plugins:[
new htmlWebpackPlugin({
title:"首页",
chunks: ['build']
}),
new htmlWebpackPlugin({
title:"build2",
filename: 'index2.html',//html文件名，不指定默认为index.html
chunks: ['build2']//指定导入打包后的js文件，可以多个
})
]
babel 转码器
作用: 将ES6代码转为ES5代码
安装babel-cli
npm install babel-cli -g
转换命令：babel app.js --out-file build.js
注意： 直接运行发现，并没有把代码转成es5
还需要在目录下创建.babelrc文件，设置为
preset是预处理的意思
{"presets": ["es2015"]}
并且还需要安装：
npm install --save-dev babel-preset-es2015
webpack+babel
使用webpack将es6转成es5
使用babel-loader
需要安装
npm install babel-loader --save-dev
在webpack.config.js中加入对应的处理
{
test: /\.js$/,
loader: 'babel?presets[]=es2015',//传入参数
}
注意在本地也要安装babel-cli
npm install babel-cli --save-dev
webpack+react
首先我们需要安装3个模块
npm install react react-dom babel-preset-react --save-dev
react和react-dom是我们需要的react库, 作为我们需要导入的库文件，
var React = require('react');
var ReactDOM = require('react-dom');
babel-preset-react 是用来转换jsx语法的
在loader中修改为：
{
test: '/\.js$/',
//如果没有用es6可以不用加presets[]=es2015预处理
loader: 'babel?presets[]=es2015&presets[]=react'
}
热加载
如果改变某个组件，不会整体刷新网页，只改变修改的部分
安装 react-hot-loader
npm install react-hot-loader --save-dev
在loader中修改为：
var path = require('path');
{
test: '/\.js$/',
loaders: ['react-hot','babel?presets[]=es2015&presets[]=react'],
include: path.resolve(__dirname, 'react'),
exclude: '/node_modules/'
}
