一、概念

Webpack是一个模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理，它将根据模块的依赖关系进行静态分析，生成对应的静态资源 四个核心概念：

• Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
• Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
• Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析： JavaScript、json）。
• Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

关于Loader：

• Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
• Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
• 它本身是一个函数，接受源文件作为参数，返回转换的结果
• loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

关于Plugins：

• 插件件可以完成一些loader不能完成的功能。
• 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
• CleanWebpackPlugin: 自动清除指定文件夹资源
• HtmlWebpackPlugin: 自动生成HTML文件
• UglifyJSPlugin: 压缩js文件

webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

官方文档 (opens new window)

二、webpack的基本使用

1、 生成package.json文件

npm init //初始化（在对应的文件中）

2、安装webpack（都要安装）：

 npm install webpack  -g  //全局安装
 npm install webpack  --save-dev  //局部安装

3、执行命令：

webpack src/js/index.js build/index.js //webpack会把es6的模块化语法编译成浏览器能够识别的语言。

4、package配置：

  "scripts": {
         "build": "webpack"
   },

打包应用运行:npm run build

三、使用webpack配置文件

webpack的核心配置文件：执行webpack命令时，会在当前目录查找webpack.config.js文件读取配置

• entry：入口文件，将所有打包资源全部引入
• output：输出文件，将资源输出到指定目录下
• loader：处理webpack不能够解析的模块
• plugins：执行loader做不了的任务

const path = require('path'); //path内置的模块，用来设置路径。

module.exports = {

   entry:'./src/js/index.js', //入口（从哪里进入开始解析）

   output: { //出口（最终加工完的代码输出到哪里）
   
         path: path.resolve(__dirname, 'build'),//输出文件路径配置
         filename: 'index.js',// 输出文件名
   
  }
};

四、使用loader解析文件

使用less-loader处理less文件：

• 安装：npm install less-loader less --save-D
• 安装：npm install css-loader style-loader --save-D
• 向rules中写入配置：

{
       test: /\.less$/,
       use: [{
           loader: "style-loader" // 创建一个style标签，将js中的css放入其中
       }, {
           loader: "css-loader" // 将css以CommonJs语法打包到js中
       }, {
           loader: "less-loader" // 将less转换成css
       }]
 }

在入口js中引入less文件：import '../less/test.less';(为了让打包时使用此文件)

使用file-loader处理图片资源：

• 安装：npm install --save-dev file-loader
• loader：

{
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader', //如果不做图片转base64，可以用file-loader
          options: {
            outputPath:'img', //图片最终输出的位置
            publicPath:'../build/img',//css资源图片路径
    		name:'[hash:5].[ext]'//修改图片名称
          }
        }
      ]
 }	

使用url-loader处理图片资源

• 安装：npm install url-loader --save-D
• loader：

 {
       test: /\.(png|jpg|gif)$/,
       use: [
         {
           loader: 'url-loader',       //如果不做图片转base64，可以用file-loader
           options: {
             limit: 8192, //设置文件的最大的大小，大于8KB不转换，小于8KB转成base64             
             outputPath:'img',         //图片最终输出的位置
             publicPath:'../build/img',//css资源图片路径
             name:'[hash:5].[ext]'     //修改图片名称
           }
         }
       ]
  }

js语法检查

• 安装jshint-loader：

npm i jshint-loader --save -D
npm i jshint --save -D

• 新增loader：

{
      test: /\.js$/, // 涵盖 .js 文件
      enforce: "pre", // 预先加载好 jshint loader
      exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
      use: [
        {
          loader: "jshint-loader",
          options: {
            //jslint 的错误信息在默认情况下会显示为 warning（警告）类信息
            //将 emitErrors 参数设置为 true 可使错误显示为 error（错误）类信息
            emitErrors: false,

            //jshint 默认情况下不会打断webpack编译
            //如果你想在 jshint 出现错误时，立刻停止编译
            //请设置 failOnHint 参数为true
            failOnHint: false
          }
        }
      ]
  }

es6转es5

• 安装babel-loader：

npm install babel-loader babel-core babel-preset-es2015 --save -D
npm i babel-loader@7 --save -D

• loader：

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['es2015']
      }
    }
}

五、使用插件

提取css,合并为单独的文件

• 安装ExtractTextWebpackPlugin插件：

npm install extract-text-webpack-plugin --save-D

• 引入插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

• 新增plugins插件配置项，并实例化ExtractTextPlugin插件：

plugins: [
 		//提取css为单独文件
 		new ExtractTextPlugin("./css/index.css"),
]

• 修改原less-loader的配置如下：

{
     test: /\.less$/, //匹配文件的规则，说明该loader对哪个文件生效
     use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: ["css-loader","less-loader"]
     })
 }

注：因为css提取成单独文件，不再包含在js中了，所以要修改url-loader配置publicPath:'../build/img'

html文件的处理和清除文件夹（插件HtmlWebpackPlugin）

• 安装：

npm install --save-dev html-webpack-plugin

• 引入插件：

var HtmlWebpackPlugin = require('html-webpack-plugin');

• 新增一个插件配置项：

new HtmlWebpackPlugin({
      title:"webpack",
      filename:"index.html",
      template:"./src/index.html"
     })
     
备注：要在html模板中写入<title><%= htmlWebpackPlugin.options.title %></title>，title配置才生效

• 删除掉模板html中的所有引入
• 为了清空工作目录，安装插件(clean-webpack-plugin)：

npm i clean-webpack-plugin -D

• 引入插件：

new CleanWebpackPlugin('./build')

备注：最新版的CleanWebpackPlugin不传任何参数

六、build环境的搭建

• 新建文件目录：config
• 移动webpack.config.js文件到config中，改名为：webpack.build.js
• 通过执行：webpack --display-modules --config ./config/webpack.build.js 指定配置文件运行
• 在package.json中自定义命令，以后可以通过：npm run build 代替完整命令

       "build": "webpack --display-modules --config ./config/webpack.build.js"

注：如果发现build文件夹出现在了config中，解决办法如下：

修改出口output中的path为：
            resolve(__dirname, '../build')