全局：cnpm i webpack -g
局部：cnpm i webpack -D
1、在webpack中需要有出口与入口文件
指令：webpack app.js build.js
注释：打包webpack文件，入口文件app.js，打包为build.js文件
2、进入文件每个项目都需要用到指令：npm init
一路回车 + -y 代表yes
3、假设建立开发目录src文件夹
4、假设建立生产目录build文件夹
5、建立webpack配置文件config.js文件
const path = require(‘path‘) 由于webpack基于nide.js可以引入node模块
const config = {} 创建模块
module.exports = config 暴露模块
module.exports = (env)=>{ 暴露模块（函数） 可以运行指令webpack --env hello; 函数中可以接受env参数，打印env参数会在命令行显示hello
console.log(env)
return config
}
对象内配置任务：
入口 entry：‘路径’ 一般是src下的app.js文件，入口文件可以是数组，可以引入多个入口文件，运行顺序从前到后； 此种方法可用于单页面应用
出口 output：{
path:path.join(__dirname,‘build‘), 出口打包文件 注释：path.join()方法可以合并路径，__dirname为相对路径，即build之前最大的路径
filename:‘app.js‘ 打包的文件名字叫做app.js 不确定名字时会打包成main.js文件
}
entry:{ 入口文件也可以设置为对象，打包不同的文件； 此种方法可用于多页面应用
app:‘./src/app.js‘,
vendor:‘./src/vendor.js‘
},
output:{
path:path.join(__dirname,‘build‘),
filename:‘[name]_[hash].js‘ 名字为入口设置的名字；+hash值可以区别版本，只要改动文件内容，hash值必定不同
}
6、建立一个html文件，引入打包的文件可以测试运行
7、指令webpack --watch
监听：当改动文件后立即更新
8、在package.json中的script中可以修改指令
例子："build":"webpack" 输入命令npm run build可以运行webpack
9、指令cnpm i html-webpack-plugin -D 开发用插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 引入插件
用法：
plugins:[
new HtmlWebpackPlugin({
title:"乐蜂网"， 网页的title名字
fliename:"123.html" 文件的名字
})，
new HtmlWebpackPlugin({
title:"乐蜂网"， 网页的title名字
fliename:"123.html"， 生成文件的名字
template:‘./src/index.jade‘ 以路径文件为模板创建文件； 注：此时title不起作用，因为它的优先级低于模板
})，
new webpack.optimize.UglifyJsPlugin({ JS代码压缩配置
compress: {
warnings: false,
drop_console: false
}
})
]
使用此方法会自动生成配置html，可以在实例中添加title等参数，可以生成多个实例（多页面应用）
10、指令cnpm i jade-loader -D
需先下载cnpm i jade -D 才能使用
module:{
rules:[
{
test:/\.jade$/, 测试jade
use:‘jade-loader‘ 使用jade-loader插件
}
]
},
11、webpack-dev-server
webpack相辅相成有一个server功能工具可以提供开发的热更新服务器
npm i webpack-dev-server -g 全局
npm i webpack-dev-server -D 局部
第一种启动方式：运行指令 webpack-dev-server
第二种启动方式：可以在config中配置devServer选项，在执行指令webpack就OK
devServer:{
port:1234, 端口号
contentBase:‘./build‘, 文件位置
historyApiFallback: true, 更新
open: true, 自动打开
proxy:{ 配置跨域，服务器代理
}
}
12、指令cnpm i url-loader html-withimg-loader -D
在webpack中专门有一些东西编译文件、处理文件，这些东西就是loader，loader使用就是在配置项中，设置modules，在modules中设置rule值为数组，在rule中放入多个匹配规则
对html文件进行编译（显示图片）
{
test:/\.html$/,
use:‘html-withimg-loader‘
}
13、指令cnpm i file-loader -D
配置图片打包：
{
test:/\.(png|jpe?g|svg|gif)$/,
use:[
{
loader:‘url-loader‘,
options:{
limit:1000, 文件大小；超出不能打包
name:‘images/[hash:8].[name].[ext]‘ 文件名字
}
}
]
}
14、指令cnpm i css-loader style-loader -D
配置：
{
test:/\.css$/,
use:[‘style-loader‘,‘css-loader‘] 先编译css-loader再编译style-loader
}
15、配置scss
cnpm i scss-loader -D
配置：
{
test:/\.scss$/,
use:[‘style-loader‘,‘css-loader‘,‘scss-loader‘] 先编译scss-loader再编译css-loader再编译style-loader
}
16、指令cnpm i extract-text-webpack-plugin -D
将css、style、scss抽出来打包
引入 const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)
module:{
[
{
test:/\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback:"style-loader", 用的最后一个loader
use:"css-loader"
})
}，
{
test:/\.scss$/, scss配置
use:ExtractTextWebpackPlugin.extract({
fallback:"style-loader", 用的最后一个loader
use:["css-loader","scss-loader"]
})
}
]
}
plugins:[
new ExtractTextWebpackPlugin({
fliename:‘app.css‘, 打包的文件名字（scss、css、style）
allChunks: true
})
]
17、指令cnpm i jsx-loader -D
jsx配置：
{
test:/\.(jsx|js)/, 编译jsx或js文件
exclude:/node_modules/, 除了node_modules中的文件
use:‘jsx-loader‘
}
18、react配置
cnpm i react react-dom -S
19、ES6转ES5
cnpm i [email protected] -D
cnpm i [email protected] -D
cnpm i [email protected] -D
cnpm i [email protected] -D
cnpm i [email protected] -D
前四个是ES6编译ES5；后一个是编译react的
配置文件：
{
test:/\.(jsx|js)/, 编译jsx或js文件
exclude:/node_modules/, 除了node_modules中的文件
loader:‘babel-loader‘,
query:{
presets:[‘es2015‘,‘react‘]
}
}