自动化构建工具WebPack

什么是 Webpack？

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

安装 Webpack

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

由于webpack1.x和3.x版本存在区别，全局安装webpack以后，再局部安装可以避免版本冲突或不合适的情况

Webpack 打包js文件

    # webpack 原始js文件路径 打包后存放js文件路径    webpack src/js/entry.js dist/js/bundle.js

Webpack 的配置文件webpack.config.js

const path = require('path');module.exports = {  // 入口文件  entry: './src/index.js',  // 打包后输出的配置块  output: {    // 文件名    filename: 'bundle.js',    // 调用resolve()设置路径    path: path.resolve(__dirname, 'dist')  }};

配置完成以后，只需要执行webpack即可开始打包。

Webpack 打包css文件

（1） 下载对应的loader加载器：

npm install css-loader style-loader --save-devnpm install file-loader url-loader --save-dev

url-loader是对 file-loader高层封装，需要配合file-loader使用。

（2） 配置使用：

const path = require('path');  module.exports = {    entry: './src/index.js',    output: {      filename: 'bundle.js',      path: path.resolve(__dirname, 'dist')    },   // 添加模块配置   module: {     // 查找规则     rules: [       {         test: /\.css$/,         // 要加载使用Loader         use: [           'style-loader',           'css-loader'         ]       }     ]   }  };

Webpack打包图像文件

（1） 下载对应的loader加载器：

npm install --save-dev file-loader

（2） 配置使用：

const path = require('path');  module.exports = {    entry: './src/index.js',    output: {      filename: 'bundle.js',      path: path.resolve(__dirname, 'dist')    },    module: {      rules: [        {          test: /\.css$/,          use: [            'style-loader',            'css-loader'          ]        },       // 添加模块配置项       {         test: /\.(png|svg|jpg|gif)$/,         use: [           'file-loader'         ]       }      ]    }  };

Webpack热加载技术

（1） 下载对应的安装包：

npm install --save-dev webpack-dev-server

（2） 配置使用：

  const path = require('path');  const HtmlWebpackPlugin = require('html-webpack-plugin');  const CleanWebpackPlugin = require('clean-webpack-plugin');  module.exports = {    entry: {      app: './src/index.js',      print: './src/print.js'    },   // 添加配置项      devtool: 'inline-source-map',   devServer: {     // 服务器内容目录     contentBase: './dist'   },    plugins: [      new CleanWebpackPlugin(['dist']),      new HtmlWebpackPlugin({        title: 'Development'      })    ],    output: {      filename: '[name].bundle.js',      path: path.resolve(__dirname, 'dist')    }  };

（3） 添加脚本命令：

{    "name": "development",    "version": "1.0.0",    "description": "",    "main": "webpack.config.js",    "scripts": {      "test": "echo \"Error: no test specified\" && exit 1",      "watch": "webpack --watch",      // 配置一个命令名称+     "start": "webpack-dev-server --open",      "build": "webpack"    },    "keywords": [],    "author": "",    "license": "ISC",    "devDependencies": {      "clean-webpack-plugin": "^0.1.16",      "css-loader": "^0.28.4",      "csv-loader": "^2.1.1",      "file-loader": "^0.11.2",      "html-webpack-plugin": "^2.29.0",      "style-loader": "^0.18.2",      "webpack": "^3.0.0",      "xml-loader": "^1.2.1"    }  }

Webpack插件的使用

var webpack = require('webpack');// 导入非 webpack 自带默认插件var ExtractTextPlugin = require('extract-text-webpack-plugin');var DashboardPlugin = require('webpack-dashboard/plugin');// 在配置中添加插件plugins: [  // 构建优化插件  new webpack.optimize.CommonsChunkPlugin({    name: 'vendor',    filename: 'vendor-[hash].min.js',  }),  new webpack.optimize.UglifyJsPlugin({    compress: {      warnings: false,      drop_console: false,    }  }),  new ExtractTextPlugin({    filename: 'build.min.css',    allChunks: true,  }),  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),  // 编译时(compile time)插件  new webpack.DefinePlugin({    'process.env.NODE_ENV': '"production"',  }),  // webpack-dev-server 强化插件  new DashboardPlugin(),  new webpack.HotModuleReplacementPlugin(),]