自动化构建工具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(),]

自动化构建工具WebPack

原文地址：http://blog.51cto.com/xvjunjie/2154304