Webpack配置示例和详细说明

/*
 * 请使用最新版本nodejs
 * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本。
 * 也可以使用 webpack -d -w 命令,生成用于开发调试的代码。
 * 通常开发使用 node server.dev.js 命令 , server.dev.js基于此配置做了特殊处理, 主要是为了自动刷新和热更新, 这个服务只是在内存中生成缓存文件,不会在硬盘中生成文件。
 * webpack配置,如果出现问题,通常都是路径问题造成的
 *
 * 常用命令看package.json中配置的scripts,比如
 * "scripts": {
 * "d": "node server.dev.js",
 * "reset:dist": "rm -fr dist && mkdir -p dist/build && cp -r src/lib dist",
 * "p": "npm run reset:dist && ./node_modules/.bin/webpack -p --display-error-details --progress --colors"
 * }
 */


//导入Node.js的path模块,主要用来转换成绝对路径,比如path.resolve(__dirname, 'build')
const path = require('path');

//导入webpack整个模块
//也可以不导入webpack整个模块,而值导入用到的内置插件模块
//比如 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
//这样后面使用方式为 new CommonsChunkPlugin
//否则为new webpack.optimize.CommonsChunkPlugin
const webpack = require('webpack');

//导入ExtractTextPlugin插件,作用提取代码中的css生成独立的CSS文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//导入HtmlWebpackPlugin插件,作用按需求生成html页面,想用好,挺麻烦的,可以不用
const HtmlWebpackPlugin = require('html-webpack-plugin');

//打包配置 webpack配置,多数同时支持String, Array or Object的写法。单字符串的形式用于简单情况,key-value对象的形式用于复杂情况。
const config = {

    // 入口文件配置,打包输出的来源
    // 多种写法 entry:'entry.js' or entry:{entry1:'entry1.js'} or entry:{entry1:['entry1a.js', ...]} or etc.
    // 通常用path.resolve(__dirname, 'src/entry.js')转换成绝对路径,也可以使用相对路径,比如 './src/entry.js'
    entry: {
        index: [path.resolve(__dirname, 'src/index.js')],
        edit: [path.resolve(__dirname, 'src/edit.js')]
    },

    //输出配置
    //path 输出目录 通常用path.resolve(__dirname, 'build')转换成绝对路径,也可以使用相对路径,比如 './build'
    //publicPath 开发代码中url的转换拼接处理,通常是代码中各种资源的地址,比如图片等, url目录前缀或完整网址url前缀'http://cdn.com/'
    //filename 输出js文件名,[name]对应entry对象键名,也可以指定名字,加上id和hash可以避免缓存问题,webpack会用实际值替换类似[hash]这样字符串
    output: {
        path: path.resolve(__dirname, 'dist/build'),
        publicPath: './build/',
        filename: '[name].[id].[hash].js',

    },

    //路径解析配置
    resolve: {
        //自行补全路径中文件的后缀, 第一个是空字符串，对应不需要后缀的情况
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
    },

    //模块
    module: {
        //loaders: 加载器
        // [
        //     {
        //         test:正则表达式,匹配的文件名则使用这个加载器。
        //         include: 匹配的目录则进一步处理
        //         exclude: 匹配的目录则排除
        //         loader: `!`用于分隔loader 字符串形式,作用和数组形式一样
        //         loaders: ['loader',...] 数组形式,作用和字符串形式一样
        //     }
        // ]
        //
        // 如果同一文件需要多个loaders处理,也就是使用loaders: ['loader',...] 数组形式,loader的参数不能使用query:{}写法了。只能用拼接字符串写法。
        loaders: [
            {
                //加载css资源,默认写法loader:'style-loader!css-loader' css为Internal内部形式
                //ExtractTextPlugin插件写法用于生成独立的css文件,用于external link形式
                //生成的独立CSS文件中的url图片地址的publicPath,通常JS中的publicPath不一样,如果一样可以不设置
                test: /\.css$/,
                loader: ExtractTextPlugin.extract(
                    'style-loader',
                    'css-loader',
                    {
                        publicPath: "./"
                    }
                )
            },
            {
                //url-loader处理图片URL,如果图片小于limit值直接生成`base64` 格式的`dataUrl`,否则输出图片,name参数指定输出目录和图片名
                //url-loader依赖file-loader
                //image-webpack-loader是用来压缩图片的,主要是透明PNG
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url-loader?limit=8192&name=img/[name].[hash].[ext]',
                    'image-webpack-loader?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
                ]
            },
            {
                //用babel转码器加载有es2015和jsx语法的js,输出为es5语法的js,注意这里只是语法转码。
                //如果开发代码中有用到新ES规范中的新对象或属性方法还需要babel-polyfill才能转码成ES5代码
                //class-properties和object-rest-spread,是转码类属性写法和非数组对象的延展符...,新React常用到的写法,但还不是ES2015规范
                //query对象和.babelrc配置文件内容一致,必须都写,不然使用webpack的babel-loader会报错.
                test: /\.jsx?$/,
                exclude: /(node_modules|lib)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-class-properties', 'transform-object-rest-spread']
                }
            }

        ]
    },

    //script引入js类库，通过require或import的方式来使用，却不希望webpack把它编译到输出文件中。
    //比如不想这么用 const $ = window.jQuery 而是这么用 const $ = require("jquery") or import $ from "jquery"; 则配置"jquery": "jQuery"
    //键名是require或from时的字符串,键值是js内的全局变量名
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'baidu-hmt': 'window._hmt',
        'lrz': 'lrz',
        'iscroll': 'IScroll',
        'zepto': 'Zepto',
        'fabric': 'fabric',
        'react-slick': 'Slider'
    },

    plugins: [
        //输出独立的css文件,用于external link形式,如果有多个入口JS共用的CSS,会生成commons.css
        new ExtractTextPlugin('[name].[id].[hash].css'),

        //把entry中配置的多个js中共用代码提取生成为单个js, 多参数写法 new webpack.optimize.CommonsChunkPlugin("commons", "commons.js")
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "commons.[id].[hash].js"
        }),

        //按需求生成HTML页面
        //template 模板位置
        //inject: 'body' js插入在body元素内部的最后
        //chunks 对应入口文件名
        //filename 生成的文件名,可以带上路径
        //options参数对象的值可以自定义,比如这里的libJS
        //在模板页中可以获得和使用这些数据,可以在模板页中使用<%= JSON.stringify(htmlWebpackPlugin) %>;输出查看所有可用的数据
        new HtmlWebpackPlugin({
            template: 'src/template.html',
            inject: 'body',
            chunks: ['commons', 'index'],
            filename: '../index.html',
            title: '最美奥运脸',
            libJS: [
                //上拉下拉
                './lib/js/iscroll-lite.min.js'
            ]
        }),
        new HtmlWebpackPlugin({
            template: 'src/template.html',
            inject: 'body',
            chunks: ['commons', 'edit'],
            filename: '../edit.html',
            title: '最美奥运脸',
            libJS: [
                //切换左右拖动
                './lib/js/react-slick.min.js',
                //编辑图片
                './lib/js/fabric.min.js'
            ]
        })

        //ProvidePlugin的作用就是在开发代码内不需要require('react')或import ... from ... 也能使用React
        // ,new webpack.ProvidePlugin({
        //     React: 'react',
        //     ReactDOM: 'react-dom'
        // })

        //压缩代码,命令行的 webpack -p 会默认使用这个插件压缩代码
        // ,new webpack.optimize.UglifyJsPlugin({
        //     compress: {
        //         warnings: false
        //     }
        // })

    ]

    //webpack-dev-server的配置, 通常弄成独立的文件,比如server.js,
    //或者使用命令行形式,比如npm scripts命令行形式,类似webpack-dev-server -d --inline --hot
    //弄webpack-dev-server通常是为了自动刷新和热更新,配置麻烦
    // devServer: {
    //     contentBase: './',
    //     host: 'h5.baofeng.com',
    //     port: 9090, //默认8080
    //     inline: true //监控文件变化,自动重加载整个页面
    // }

};

// babel-polyfill用来转换ES2015新的对象和方法,在入口数组中,babel-polyfill必须在入口文件字符串前面,并且必须在入口文件代码的第一行import或require 'babel-polyfill'
for (let prop in config.entry) {
    config.entry[prop].unshift(
        'babel-polyfill'
    );
}

module.exports = config;