webpack学习-webpack.config.js配置

webpack是一个用于完成模块加载、编译、打包等工作流的一整套前端工程发布用基于node开发的工具。配置文件为webpack.config.js，输出一个配置对象。配置文件主要配置：

入口entry出口output插件项plugins加载器module.loaders其他解决方案配置resolve，如补全resolve.extensions其他…如搭建服务器devServer

---

配置文件预览

以下做个简单的配置文件，之后用于分析：

var webpack = require('webpack') module.exports = { entry: { index: './src/index.js' }, output: { path: './dist', publicPath: 'dist/', filename: 'build.js' }, module: { loaders: [ { // edit this for additional asset file types test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' }, { test: /\.js$/, exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//, loader: 'babel' }, { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap' }, { test: /\.scss$/, loader: "style!css!sass?sourceMap" }, { test: /\.(woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]' } ] }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] }

---

1.引入webpack

2.入口配置

entry: { index: './src/index.js' },

这里主要配置应用入口，入口文件应该包括整个项目的路由和主页面渲染render。

3.出口配置

output: { path: './dist', publicPath: 'dist/', filename: 'build.js' },

path配置输出路径，publicPath目前没有感觉到用处，查了资料说，此属性当引用静态资源和cdn时，就有用了，先记着。filename可以有，也可以没有，没有的话则会和入口文件保持同名。

4.插件项配置

其实这里的配置还是很有用的。例如： - 提取模块化引用公共部分，生成common.js文件进行复用的插件commonsPlugin：

plugins: [commonsPlugin], 打包过程中的错误提示插件BellOnBundlerErrorPlugin： var BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin') //... { plugins: [ new BellOnBundlerErrorPlugin() ] }

附上BellOnBundlerErrorPlugin插件的github地址：https://github.com/senotrusov/bell-on-bundler-error-plugin

当然，这里的插件还有很多，官网上有详细列表1。

5.加载器配置

首先，module.loaders是一个数组，可以配置多个加载器，然后每一个加载器对象都有test和loader属性，一个用于匹配文件，一个用于配置使用什么样的加载器来编译加载。例如：

{ test: /\.scss$/, loader: "style!css!sass?sourceMap" }

这是一个匹配sass文件的加载器，loader中多个编译器需要用!来分隔，执行顺序是从右向左。 对于图片文件，我们通常会使用url-loader，如下：

{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' }

其中后面的limit是指超过此大小的图片，才进行打包处理，不超过此大小的，url-loader会自动将其转化成Base64格式进行保存。

当然，这里我们还能看到还有一个属性exclude，此属性是为了排除此路径下文件的打包，这里通常是package.json里已经写好版本的外部引用。

---

---

官网有详细的插件列表，http://webpack.github.io/docs/list-of-plugins.html。 ↩