3分钟带你入门webpack

HOW WE USE WEBPACK

Webpack好用，好学，3分钟带你入门。废话不说。

Webpack主要用于模块依赖，核心就是把所有的文件都当成模块处理。为了在js中能够识别这些模块，于是我们就有了各种loader。同时我们还可以给文件压缩优化，生成hash做版本区分。

第一步，学会输入输出。

module.exports = {
    entry: 'main.js', // 入口文件
    output: {
        path: 'dist', // 输出目录
        filename: 'bundle.js' // 生成文件
    }
}

第二步，使用插件优化压缩输出文件。

var webpack = require('webpack');

module.exports = {
    entry: 'main.js',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [new webpack.optimize.UglifyJsPlugin()]
}

第三步，学会使用loader。

var webpack = require('webpack');

module.exports = {
    entry: 'main.js',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    loaders [
        {
            test: /\.js$/,
            loader: 'babel'
        }
    ]
    plugins: [new webpack.optimize.UglifyJsPlugin()]
}

通过babel，我们就可以提前使用ES6的新特性了。

第四步，使用其他loader，比如css。

loader: [{
    test:/\.css$/,
    loader: 'style!css'
}]

之后我们就可以在js里使用require('xxxx.css')，把css文件作为模块导入了。

第五步，区分开发和生产环境。

var env = process.env.NODE_ENV;
module.exports = {...} // 基础配置
if (env === 'production') {
    module.exports.plugins.concat([...]); // 为生产环境单独添加插件
}
if (env === 'development') {
    module.exports.devtool = 'source-maps'; // 还有eval-source-map等模式
    module.exports.watch === true;
}

到这里的时候估计就有人会对NODE_ENV有所疑问了。这家伙哪来的。

其实这个是我们在命令行中运行 NODE_ENV=production webpack就是生产环境模式的打包啦！

当然我们更多的是在package.json的script中写入命令

{   
    ...
    "scripts": {
        "dev": "set NODE_ENV=development&&webpack"
        "build": "set NODE_ENV=production&&webpack"
    }
    ...
}

Finally

嗯哼，小伙伴们，三分钟已到，是不是已经都会了呢！