vsonChen
前序：
其实我并不喜欢写笔记，但是由于健忘症日趋严重，感觉笔记还是需要写的。接下来的我会写webpack、vue、fetch、node、koa的开发经历，希望对日后也有帮助。
注：本文只适用于webpack2.x之前版本，4.0版本对optimization、plugins等进行了整合修改，修改较大，暂时没时间对其修改进行整合
进入正题
搭建webpack准备工作：
1、安装node（我们需要用npm命令来安装webpack）
2、安装webpack（npm install webpack --save-dev）
3、npm init初始化项目列表
开始搭建webpack所需插件和配置文件：
首先，我们需要部署好我们开发目录的文件结构，这边我先创建一个initProject文件夹来存放开发代码，和一个projectOutput文件夹来存放输出代码。然后在主目录下创建一个webpack.config.js文件。
接着，我们需要定义输入和输出的js文件路径
var webpack=require('webpack');
module.exports={
entry:{
"main":__dirname+"/initProject/index.js"
},
output:{
path:__dirname+"/projectOutput/",
filename:"[name].js"
}
};
至此，webpack的基本搭建就完成了，我们需要了解我们实际开发需要什么功能：
1、例如编译less，编译es语言等等，这时候我们需要用到loader
一、首先我们看下loaders处理器有哪些：
1、样式处理器(需安装相关css处理模块，例如less需安装less)
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
autoprefixer scss自动添加后缀
2、js处理器
babel-loader 加载babel编译器（处理es6、jsx等语言）
jsx-loader 加载jsx扩展语言处理器（babel-loader可以编译）babel-loader：
babel-core 编译babel核心功能包
babel-preset-es2015 用于编译es6的依赖包
babel-preset-stage-0 用于编译es7的依赖包
babel-preset-react 用于编译react中jsx语言的依赖包
3、文件/图片处理
file-loader 文件/图片打包
url-loader 对file-loader的封装（图片转化，小于8K自动转化为base64的编码）
4、json处理器（已废除）
json-loader 对json文件进行处理打包
5、html处理器
html-loader 对html文件进行处理打包
6、vue处理器
vue-loader 对vue文件进行处理打包
二、接下来我们就要安装我们需要的loaders和引用
安装loaders：
npm install XXX-loader --save-dev
使用loaders：
module:{
loaders:[
{
test:/\.(png|jpg|gif)/, loader:"url-loader?limit=8192"
},
{
test:/\.css/, loader:"style!css"
},
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel'
]
}
对于webpack2
module:{
rules:[
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.js$/,
use:["babel-loader"],
exclude: /node_modules/
},
{
test: /\.vue$/,
use:[
{loader: "vue"}
]
}
]
}
接下来我们需要 babel-plugin-transform-runtime和babel-runtime来完成特定方法的转码（promise等）
（与babel-polyfill引入的方法对比可以自行查找 ）
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save-dev
这里注意一下，webpack2新特性：
UglifyJsPlugin 将不再把所有 loader 都切到代码压缩模式。 debug 选项已经被移除。Loader 不应该再从 Webpack 的配置那里读取自己选项了。取而代之的是，你需要通过 LoaderOptionsPlugin 来提供这些选项。
plugins:[
new webpack.LoaderOptionsPlugin({
options: {
babel: {
presets: ['es2015',"stage-0"],
plugins: ['transform-runtime']
}
}
})
]
说明：test为后缀匹配文件，exclude为不处理的目录，loader为引用的处理器（'?'后面跟各处理器的触发行为，可用query设定）
2、插件
1、UglifyJsPlugin
用于js压缩、混淆，compress压缩过程
plugins:[
new webpack.optimize.UglifyJsPlugin({uglifyObject})
]
uglifyObject:压缩选项,参数：
1、compress：boolean|object
2、mangle：boolean|objectboolean 开启关闭压缩or混淆，
object：{warnings:false，except：array}warnings:错误提醒,except:排除操作项
2、HtmlWebpackPlugin
生成html文件，自动加载生成的js文件，后带hash值
new HtmlWebpackPlugin({
filename:'html/indexMin.html',//输出文件路径
template:__dirname+'/src/html/index.html',//输入文件模板路径
inject:true,//js设置到body加载
//简化代码
minify:{
removeComments:true, //移除HTML中的注释
collapseWhitespace:false //删除空白符与换行符
}
})
其他参数：
title: 用来生成页面的 title 元素
filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function} default:'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)
3、去后缀
resolve:object;
object:root=>搜索文件的绝对路径；extensions=>文件后缀名;alias=>文件别名{name:path}；
代码示例：
resolve: {
extensions: ['', '.js', '.vue']
}
4、接下来说一个热启动的东西，叫webpack-dev-server
热启动分两种，一个是frame的形式，主要通过iframe嵌套；另一种是inline的形式，就是页面数据实时刷新。
首先第一步，安装：
npm install webpack-dev-server --save-dev
接下来我们需要在webpack.config.js输出模块上面加上devServer
devServer:{
contentBase:'./projectOutput',
historyApiFallback:true,
inline:true,
port:8777
}
这里我注释一下各个参数的含义：
contentBase：服务器的文件路径，例如你要执行projectOutput下的test.html文件，只需要在浏览器打开：http://localhost:8777/test.html。
historyApiFallback：服务器找不到页面的时候自动跳转到index。
inline：实时刷新。
port：端口名
至此，webpack基础搭建基本完成，可以愉快的去配合上各种语言和框架了
网友评论