为何使用 webpack

webpack 是一个构建工具，针对各种静态文件进行依赖、压缩(图片转Base64格式)、解析(Scss-Less-TypeScript 引擎)、合并等等自动化操作。

webpack 的各种插件可以直接应对各种场景,能使前端开发流程化,只需要一开始配置好脚本就可以.

入门教程:
Webpack 指南 :
https://zhuanlan.zhihu.com/p/20367175
https://zhuanlan.zhihu.com/p/20397902
https://zhuanlan.zhihu.com/p/20522487 --> React配合开发

下面罗列 webpack 能够解决大型开发遇到的问题 :

文件依赖. 部署前置处理.

依赖

早期我们通过 特定的顺序 来进行安排 Javascript 、CSS 依赖关系.

<script src="jquery.min.js"></script>  
<script src="jquery.some.plugin.js"></script>  
<script src="index.js"></script>  

导致的问题：

• http请求过多
• 过多的全局变量模糊等

解决方法 ：
使用CommonJS 或者 ES6 模块 , 或者使用 RequireJs

// Version.js
module.exports = { version: 1.0 };  

// App.js
var config = require('./Version.js');   // require 不能在浏览器中直接使用,需要Babel,这都是打包过程
console.log('App Version:', config.version);  

压缩

举个例子:针对某些低于一定的大小的图片文件,可以通过 配置 转化Base64 格式.

按需加载

需要用到的资源才会http请求.

常用的开发版本配置文件如下

/**
 * 该文件名- webpackDevConf.js
 * 编码作者- 许道龙
 * 创建日期- 2017/1/3 09:23
 * 作者邮箱- xudaolong@vip.qq.com
 * 作者博客- http://xudaolong.github.io/
 * 修改时间-
 * 修改备注-
 * 编码内容-
 */

const path = require('path');
const {resolve} = require('path');
const {existsSync}= require('fs');
const webpack = require('webpack');

// plugin
const HtmlWepackPlugin = require('html-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// path
const rootPath = path.resolve(__dirname);
const webPath = path.resolve(rootPath, '../../web');
const ThemePath = path.resolve(rootPath, '../../web/utils/antdTheme.js');
const buildPath = path.resolve(rootPath, '../../web/build');
const nodeModules = path.join(__dirname, '../../node_modules');

module.exports = {
    entry: [
        'babel-polyfill',
        'react', // Include this to enforce order
        'react-dom', // Include this to enforce order,
        './web/index.web.jsx'
    ],
    output: {
        path: buildPath,
        filename: '[name].[hash].v1.0.0.js',
        publicPath: '/',
        chunkFilename: '[name].chunk.js'
    },
    //resolve path
    resolve: {
        modulesDirectories: ['node_modules', nodeModules],
        extensions: ['', '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
    },
    module: {
        loaders: [
            // jsx
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                // include: webPath,
                query: {
                    cacheDirectory: true,
                    presets: [
                        ['react'],
                        ["es2015"],
                        ['stage-0']],
                    //transform-class-properties:支持es6 static
                    plugins: ["transform-class-properties", ["import", {"libraryName": "antd", "style": true}]]
                }
            },
            // css
            {
                test: /\.css$/,
                loaders: ['style', 'css']
            },
            // less
            {
                test: /\.less$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'postcss',
                    `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(require(ThemePath)())}}`
                ],
            },
            // Boootstrap font image loader
            {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                loader: 'url-loader'
            },
            // URL image loader
            {
                test: /\.(png|jpg|jpeg)$/,
                loader: 'file-loader?name=img/[hash:8].[name].[ext]'
            },
            // svg
            {
                test: /\.svg$/,
                loader: 'raw-loader'
            }
        ]
    },

    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        // new Visualizer(),
        new HtmlWepackPlugin({
            filename: `index.html`,
            inject: true,
            minify: {    //压缩HTML文件
                removeComments: true,    //移除HTML中的注释
                collapseWhitespace: true   //删除空白符与换行符
            }
        }),
    ],
    externals: {}
};

生产版本配置

/**
 * 该文件名- webpackProConf.js
 * 编码作者- 许道龙
 * 创建日期- 2017/1/3 09:24
 * 作者邮箱- xudaolong@vip.qq.com
 * 作者博客- http://xudaolong.github.io/
 * 修改时间-
 * 修改备注-
 * 编码内容-
 */

"use strict";

var WebpackStripLoader = require('strip-loader');
var devConf = require('./webpackDevConf');
var webpack = require("webpack");

// 去除console.log代码
var stripLoader = {
    test: [/\.js$/, /\.es6$/],
    exclude: /node_modules/,
    loader: WebpackStripLoader.loader('console.log')
};
devConf.module.loaders.push(stripLoader);

// 代码压缩
var uglifyJs = new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
});
devConf.plugins.push(uglifyJs);

// 为react指示编译生产环境代码
var definePlugin = new webpack.DefinePlugin({
    'process.env':{
        'NODE_ENV': JSON.stringify('production')
    }
});
devConf.plugins.push(definePlugin);

module.exports = devConf;