Webpack使用以及分析

创建时间：2016-09-09 投稿人：浏览次数：999

Webpack

What

在 webpack 里，所有类型的文件都可以是模块，包含我们最常见的 JavaScript，以及 css 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更有效地管理这些文件。

主要感觉：从入口js遍历被引用的js和css，甚至图片，json等，然后把这些文件都打包成一个js文件，最终提供给应用使用。图片可能被base64或者压缩后路径，css用js字符串实现，json用字符串实现。

How

配置

webpack配置：webpack.config.js，配置entry和output。entry用于页面入口（Index.html），output用于构建后的文件
webpack 与 browserify 一类工具的特点，它们在 HTML 文件中直接引用构建后的 js 文件，而不是源文件。

模块化

配置module:给某一类型文件定义加载器

CSS加载器

var webpack = require("webpack");

module.exports = {
    //页面入口文件配置
    entry: {
        index : "./assets/js/index.js",
        test : "./test/index.js"
    },
    //入口文件输出配置
    output: {
        path: "./dist/js",
        filename: "[name]_bundle.js"
    },
    module: {
        //加载器配置
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["es2015", "react"]
                }
            },
            { test: /.css$/, loader: "style!css" },
            {test: /.less/,loader: "style-loader!css-loader!less-loader"},
            { test: /.(png|jpg)$/,loader: "url-loader?limit=10000"}
        ]
    },
    externals: {
     // 我这么写是为了绕过webpack把所有require都覆盖了，使得我的NW.js应用中可以使用原生的node_modules(因为nw中前后端不分家）
        "webpack_require("handlebars")": "require("handlebars")",
        "webpack_require("linvodb3")": "require("linvodb3")",
        "webpack_require("level-js")": "require("level-js")"
    },
    //其它解决方案配置
    resolve: {
        root: "/", //绝对路径
        extensions: ["", ".js"],
        alias: {
            // AppStore : "js/stores/AppStores.js"
        }
    }
};