webpack 1的配置使用

• webpack是什么？
  webpack是一个前端资源加载/打包工具，有两种依赖声明方式：同步和异步。将依赖分割成多个节点，然后每个节点形成一个新的文件块。经过优化后的文件块树，会以一个个文件形式分发出去（仅仅打包成一个大文件形式是很低效的）。
• webpack有哪些优点？

• 分离现有依赖树，按需加载
• 高效保证第一次加载
• 静态资源模块化
• 第三方库模块化加载
• 实现加载器几乎所有环节的可配置性

• 安装与使用

// 安装
npm install -g webpack // 全局安装方式
npm install webpack  // 本地安装(建议，声明webpack依赖创建package.json)
// 使用
npm init  // 将产生一个package.json依赖配置文件
npm install  // 按配置方式安装依赖
webpack -p // webpack打包
webpack --watch  // 自动监听变化，动态编译

• webpack中的配置项与常用node模块使用

entry: 应用程序开始执行和webpack开始打包的入口文件
output: webpack输出结果的相关选项
    path: 所有输出文件的目标路径
    filename: 输出文件
    publicPath: 输出解析文件的目录
    library: 导出库的名称
    libraryTarget:导出库的类型
resolve: 解析模块请求的选项
module: 模块配置
    test/include: 具有相同的作用，都是必须匹配选项
    exclude: 必不匹配选项(优先于test和include)
    // - 只在 test 和 文件名匹配 中使用正则表达式
    // - 在 include 和 exclude 中使用绝对路径数组
   // - 尽量避免 exclude，更倾向于使用 include
plugins: 附加插件列表

• webpack 1 config实例

const path = require('path');
// 引入路径模式匹配模块，用于多文件
const glob = require('glob');
const webpack = require('webpack');
// 分离css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 创建index入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 获取webpack.config.js同级目录作为项目根目录
const ROOT_PATH = path.resolve(__dirname);
// 获取所有入口文件
let getEntry = function(gPath) {
    // 需要单独打包的第三方库作为单独的入口
    let entries = {
        jquery: ['jquery'],
        react: ['react', 'react-dom'],
        vendor: ['./index.js']
    };
    glob.sync(gPath).forEach(function(entry) {
        let pname = entry.split('/').splice(3).join('/').split('.')[0];
        entries[pname] = [entry];
    });
    return entries;
};
let isProduction = process.env.NODE_ENV === 'production';
let entries = getEntry('./src/views/**/*.jsx');
let chunks = Object.keys(entries);
const webpack_config = {
    // 页面入口文件配置
    entry: entries,
    // 入口文件输出配置
    output: {
        // 指定编译后代码位置
        // path: path.resolve(ROOT_PATH, 'dist'),
        path: path.resolve(ROOT_PATH),  // 以根路径部署，指定当前项目路径为根路径
        // 打包JavaScript文件及其依赖文件，并指定生成文件的文件名
        filename: isProduction ? 'assets/js/[name].min.js' : 'assets/js/[name].[hash].js',
        // publicPath: '/dist/',
        publicPath: '/',    // 以根路径部署，指定当前项目路径为根路径
        chunkFilename: 'chunk/[name].chunk.js'
    },
    module: {
        // 加载器模块配置
        loaders: [
            // .jsx babel-loader编译处理
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } },
            // .scss css-loader!sass-loader这里注意，中间用!链式loader，从右向左依次执行
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') },
            // images(.png|jpg|gif|svg) url-loader处理，小于10kb的转为base64
            { test: /\.(png|jpg|gif)$/, loader: 'url-loader', query: {
                limit: 8096,
                name: isProduction ? 'assets/images/[name].[ext]' : 'assets/images/[name].[hash].[ext]'
            }},
            {
                //文件加载器，处理文件静态资源
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader',
                query: {
                    limit: 8096,
                    name: isProduction ? 'assets/fonts/[name].[ext]' : 'assets/fonts/[name].[hash].[ext]'
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',    // 使jquery变成全局变量，这样就不用在文件中require了
            jQuery: 'jquery',
            React: 'react',
            ReactDOM: 'react-dom',
            classNames: 'classnames'
        }),
        // 类库统一打包生成一个文件
        new webpack.optimize.CommonsChunkPlugin({
            // 页面以倒序引用
            name: ['jquery', 'react', 'vendor'],
            filename: isProduction ? 'assets/js/[name].min.js' : 'assets/js/[name].[hash].min.js',
            minChunks: 3    // 提取使用3次以上的模块打包到vendor里
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new ExtractTextPlugin(isProduction ? 'assets/css/[name].css' : 'assets/css/[name].[hash].css')
    ],
    devtool: isProduction ? null : 'source-map',
    // 热部署
    devServer: {
        inline: true,
        port: 3000
    }
};
// 生成HTML文件
chunks.forEach(function(pname) {
    // 过滤掉提取的公共库和使用的第三方库
    if(pname == 'vendor' || pname == 'react' || pname == 'jquery') {
        return;
    }
    let config = {
        favicon: './src/images/fav.ico',
        title: '默认页面title',  // 如果模板文件中设置，这里将实效
        filename: pname + '.html',
        template: './template.html',
        inject: 'body',
        minify: {
            removeComments: true,  
            collapseWhitespace: false
        },
        cache: true,
        chunksSortMode: 'dependency'    // 指定引用顺序
    };
    // 指定HTML中引入的scripts
    if(pname in webpack_config.entry) {
        config.chunks = ['jquery', 'react', 'vendor', pname];
        if(isProduction) {
            config.hash = false;
        }
    }
    console.log(config);
    webpack_config.plugins.push(new HtmlWebpackPlugin(config));
});

module.exports = webpack_config;

// 更多详情请参看：https://doc.webpack-china.org/configuration/