webpack使用优化_html/css_WEB-ITnose-html教學-PHP中文網

前言

本文不是webpack入门文章，如果对webpack还不了解，请前往题叶的 Webpack入门，或者阮老师的 Webpack-Demos 。

为什么要使用Webpack

与react一类模块化开发的框架搭配着用比较好。
属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。
webpack使用内存来对构建内容进行缓存，构建过程中会比较快。

第3点我想稍微论述一下，如果看过我之前写的《如何写一个webpack插件（一）》，会发现，webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。

简要回顾Webpack的配置

Webpack的配置主要为了这几大项目：

entry：js入口源文件
output：生成文件
module：进行字符串的处理
resolve：文件路径的指向
plugins：插件，比loader更强大，能使用更多webpack的api

常用Loaders介绍

处理样式，转成css，如：less-loader, sass-loader
图片处理，如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
处理js，将es6或更高级的代码转成es5的代码。如： babel-loader，babel-preset-es2015，babel-preset-react
将js模块暴露到全局，如果expose-loader

常用Plugins介绍

代码热替换, HotModuleReplacementPlugin
生成html文件，HtmlWebpackPlugin
将css成生文件，而非内联，ExtractTextPlugin
报错但不退出webpack进程，NoErrorsPlugin
代码丑化，UglifyJsPlugin，开发过程中不建议打开
多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin
清理文件夹，Clean
调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

使用优化

了解了以上介绍的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的构建（不需要gulp与grunt，合图除外）。下面让我来介绍一下在使用过程中的一些优化点。

优化点一.如何区分开发及生产环境

在package.json里面的script设置环境变量，注意mac与windows的设置方式不一样

"scripts": {    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"}

登入後複製

在webpack.config.js使用process.env.NODE_ENV进行判断

优化点二.使用代码热替换

使用代码热替换在开发的时候无需刷新页面即可看到更新，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。

方法一：

1.将代码内联到入口js文件里

2.启动代码热替换的plugins

方法二：

直接实现一个server.js，启动服务器（需要启动热替换plugin)，下面是我在业务中用到的一个范例。具体的一些参数可以

var webpack = require('webpack');var webpackDevMiddleware = require("webpack-dev-middleware");var webpackDevServer = require('webpack-dev-server');var config = require("./webpack.config.js"); config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 将执替换js内联进去config.entry.index.unshift("webpack/hot/only-dev-server");var compiler = webpack(config);var server = new webpackDevServer(compiler, {    hot: true,    historyApiFallback: false,    // noInfo: true,    stats: {         colors: true  // 用颜色标识    },    proxy: {        "*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用    },});server.listen(9000);

登入後複製