学习webpack

学习任务

• 对webpack进行自定义的优化配置，比如为生产环境拆分vendor/css/js
• 通过运行server来实现无刷新热重载（hot-reload）

创建一个bundle文件

通常在根目录下的index.html中可以直接引入依赖
<script src="app/index.js"></script>
缺点:
1. 如果依赖不存在，或者引入顺序错误，应用程序无法正常运行
2. 如果依赖被引入但是并没有使用，那样就会存在许多浏览器不得不下载的无用代码
解决办法：
1. npm install --save package
—save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西
2. 在app/index.jsimport # from 'package'
执行以下命令进行构建：
.\node_modules\.bin\webpack app/index.js dist/bundle.js
使用带有配置的webpack
webpack.config.js

var path = require('path');
module.exports= {
    entry: 'app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

使用命令： .\node_modules\.bin\webpack --config webpack.config.js
配合npm使用
1. 在package.json中scripts添加
build: 'webpack'
2. 然后npm run build[ -- --colors](可以传递自定义参数)

安装

本地安装

npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你在项目中使用了 npm scripts，npm 首先会在本地模块中寻找 webpack。

"scripts": {
    "start": "webpack --config mywebpack.config.js"
}

代码分离

第三方库代码分离

如果文件没有被改变，文件将会被缓存从而不用去再次请求cdn。不管应用本身的代码如何改变，vendor文件的hash始终不变。
npm install --save moment
index.js

var moment = require('moment');
console.log(moment().format());

webpack.config.js

var path = require('path');
module.exports= {
    entry: './app/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

运行webpack，会发现index.js和moment都被打包进了bundle.js
这对于该应用来说是很不理想的。如果 index.js 中的代码改变了，那么整个 bundle 都会重新构建。浏览器就需要加载新的 bundle，即使其中大部分代码都没改变。

多入口

var path = require('path');

module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, 'dist')
        }
    }
}

会生成两个bundle。moment的代码在两个文件中都出现了。momen是index.js的依赖模块，每个入口起点都会打包自己的依赖模块

CommonsChunkPlugin

plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor' // 指定公共 bundle 的名字。
            })
        ]

moment只会出现在vendor bundle中

manifest文件

但是，如果我们改变应用的代码并且再次运行 webpack，可以看到 vendor 文件的 hash 改变了。

var webpack = require('webpack');
var path = require('path');

module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest'] // 指定公共 bundle 的名字。
            })
        ]
    }
};

尽管我们又创建了另一个 bundle，其开销也被我们在 vendor 文件的长期缓存中获得的好处所抵消

隐含vendor chunk

var webpack = require('webpack');
var path = require('path');

module.exports = function() {
    return {
        entry: {
            main: './index.js' //Notice that we do not have an explicit vendor entry here
        },
        output: {
            filename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                   // this assumes your vendor imports exist in the node_modules directory
                   return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
            })
        ]
    };
}

异步

将bundle拆分成可以在之后异步下载的chunk
使用import（）或者require.ensure()

动态引入：import()

index.js

function determineDate() {
  import('moment').then(function(moment) {
    console.log(moment().format());
  }).catch(function(err) {
    console.log('Failed to load moment', err);
  });
}

determineDate();

生产环境构建

webpack -p
或者
webpack --optimize-minimize --define process.env.NODE_ENV="'production'"
他们会执行如下步骤

• 使用 UglifyJsPlugin 进行 JS 文件压缩
• 运行LoaderOptionsPlugin
• 设置 NodeJS 环境变量，触发某些 package 包，以不同的方式进行编译