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'})
    ]
}