构建工具搭建之webpack

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|object

boolean 开启关闭压缩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基础搭建基本完成，可以愉快的去配合上各种语言和框架了