webpack配置学习(一)
demo: webpack-config-demo
webpack
webpack是一个JavaScript应用程序模块打包工具, 它从配置的入口文件开始, 构建一个依赖关系图, 其中包括应用程序需要的每个模块, 然后把这些模块打包输入到配置的出口文件.
基础配置
webpack最基础的配置有四项:
entry
入口文件是webpack寻找依赖关系的入口, 它从入口文件开始, 找到全部的直接或间接被入口文件依赖的文件和模块. 入口文件可以是一个或多个, 单文件应用一般是一个(不考虑第三方库). 多页面应用可以考虑一个页面一个入口. 最好能使用CommonsChunkPlugin
为多入口多页面应用抽象出共享的bundle
以达到复用的目的.
module.exports = {
entry: {
app: './src/main.js',
vendors: './src/vendors.js'
}
}
output
告诉webpack在哪个路径下的文件中写入打包编译好的代码. 即使有多个入口配置, 也只能有一个出口配置.
module.exports = {
entry: {
app: './src/main.js',
vendors: './src/vendors.js'
},
output: {
path: './dist',
filename: '[name].js'
}
}
这里需要注意的是为了在多个环境下都能使用, 最好使用绝对路径, 需要用到node.js的path
和__dirname
模块.
const path = require('path')
const root = path.resolve(__dirname, '..')
module.exports = {
entry: {
app: path.join(root, 'src/main.js'),
vendors: path.join(root, 'src/vendors.js')
},
output: {
path: path.join(root, 'dist'),
filename: '[name].js'
}
}
loader
webpack只能处理JavaScript文件, 一些其他文件需要loader预处理, 比如css, html, vue等. loader有两个目标, 一个是识别出需要被对应loader处理的文件(test
属性); 转化这些文件使其能被添加到依赖图中, 并且最终添加到bundle中(use
属性).
module.exports = {
//...
module: {
rules: [
{
test: '/\.vue$/',
loader: 'vue-loader'
},
{
test: '/\.js$/',
loader: 'babel-loader'
}
]
}
}
plugins
插件接口非常的强大, 可以通过插件做很多事, 例如打包压缩优化等, 它能解决loader无法解决的事情.
const webpack = require('webpack') //使用内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
//...
plugins : [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
}