本基础配置基于 webpack@3.0 版本

入口与输出

entry

单个入口打包

entry设置为一个入口，打包出来的文件只有一个js。__dirname 为项目根路径（nodejs）。

module.exports = {    // 入口文件路径    entry: __dirname + '/index.js',}

多个入口打包

entry 设置为一个对象，包含多个属性（入口），打包后为多个文件。

module.exports = {    // 入口文件路径    entry: {        app: __dirname + '/index.js',        vendor: ['angular', '@uirouter/angularjs']    }}

提取第三方模块

第三方模块由于在资源更新时无需更新，所以打包成单独的一个文件进行缓存。

module.exports = {    ...    // 插件    plugins: [        ...        // 防止第三方模块的文件 hash 值发生变化        new webpack.HashedModuleIdsPlugin(),        // 提取第三方模块        new webpack.optimize.CommonsChunkPlugin({            // 对应的entry数组vendor            name: 'vendor',            filename: 'js/vendor-[chunkhash:6].js'        })    ]}

提取公共模块

将重复的模块提取出来单独作为一个文件（发生在提取第三方模块之后）。

module.exports = {    ...    // 插件    plugins: [        // 提取第三方模块        ...        // 提取公共模块        new webpack.optimize.CommonsChunkPlugin({            name: 'common',            filename: 'js/common-[chunkhash:6].js'        })    ]}

output

[name]：文件名变量[hash]：如果所有文件中，有一个文件发生变化则重新生成hash值，一般用于版本更新，[hash]作为目录[chunkhash]：只有当前文件变化则重新生成chunkhash值，一般用于js文件[contenthash]：用于css的hash值（css是以js的方式生成，需和js的chunkhash分开，不然css的变化会引起js的hash值变化），在extract-text-webpack-plugin插件中使用：new ExtractTextWebpackPlugin('css/base-[contenthash:6].css')publicPath：输出目录对应的公开URL，会影响后面导入的css以及css中引入的字体文件路径

module.exports = {    // 打包输出路径    output: {        path: __dirname + '/dist',        filename: 'js/[name]-[chunkhash:6].js',        publicPath: '/'    }}

常用loader

清理打包目录

// 安装所需包$ cnpm install --save-dev clean-webpack-pluginconst CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {    plugins: [        new ClearWebpackPlugin(['dist'])    ]}

生成入口模板

// 安装所需包$ cnpm install --save-dev html-webpack-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    plugins: [        new ClearWebpackPlugin({            filename: 'index.html',            // 默认模板            template: './index.html'        })    ]}

es6转义es5

// 安装所需包$ cnpm install babel-loader babel-core babel-preset-es2015// 配置js转义规则module.exports = {    module: {        rules: [            {                test:/\.js$/,                use: [                    {                        loader: 'babel-loader',                        options: {                            presets: ['es2015']                        }                    }                ],                // 排除的文件夹                exclude: /node_modules/            }        ]    }}

css合并

合并为单个文件

loader加载顺序： less-loader > css-loader > style-loader，这里使用css-loader的压缩功能。

// 安装所需包$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less// 配置css/less转义规则let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');module.exports = {    module: {        rules: [            {                test: /\.(css|less)$/,                // 合并                use: ExtractTextWebpackPlugin.extract({                    fallback: 'style-loader',                    use: [                        {                            loader: 'css-loader', options: {                                 // 启用压缩                                minimize: true                             }                        },                        {loader: 'less-loader'}                    ]                })            }        ]    },    plugins: [        new ExtractTextWebpackPlugin('css/style-[contenthash:6].css')    ]}

合并为多个文件

使用多个ExtractTextWebpackPlugin实例生成，用exclude,include参数隔离第三方库。

// 安装所需包$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less// 配置css/less转义规则let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');// 生成多个实例，base存放第三方库，app为自定义let baseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');let appCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');module.exports = {    module: {        rules: [            {                test: /\.(css|less)$/,                // 合并                use: appCss.extract({                    fallback: 'style-loader',                    use: [                        {                            loader: 'css-loader', options: {                                 // 启用压缩                                minimize: true                             }                        },                        {loader: 'less-loader'}                    ]                }),                // 隔离第三方库                exclude: /node_modules/            },            {                test: /\.css$/,                // 合并                use: baseCss.extract({                    fallback: 'style-loader',                    use: [                        {                            loader: 'css-loader', options: {                                 // 启用压缩                                minimize: true                             }                        }                    ]                }),                // 隔离第三方库                include: /node_modules/            }        ]    },    plugins: [        baseCss, appCss    ]}

css引入的文件

字体文件，图片

// 安装所需包$ cnpm install file-loadermodule.exports = {    module: {        rules: [            {                // 加载css中的字体文件                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,                use: [                    {                         loader: "file-loader"                    }                ]            }        ]    }}

html模板转换字符串

// 安装所需包$ cnpm install raw-loadermodule.exports = {    module: {        rules: [            {                // 将html文件转换为字符串                test: /\.html$/,                use: [{                    loader: "raw-loader"                }]            }                ]    }}

devServer

npm --save-dev webpack-dev-server

module.exports = {    devServer: {        // 服务器文件路径        contentBase: './dist',        // 不跳转url        historyApiFallback: true,        // inline模式url不用变化        inline: ture,        // 热更新        hot: true,        // 开启GZIP        compress: true,    }}