webpack的安装和使用

1.简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

2.安装

cnpm install webpack -g

3.使用

• 没有引用js 之外的文件

runoob1.js 文件：

document.write(require("./runoob2.js"));

runoob2.js 文件：

module.exports = "It works from runoob2.js.";

webpack runoob1.js bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件,html直接引用bundle.js 文件即可。

• 引用了js之外的文件（比如css要用到loader）

runoob1.js 文件：

require("./style.css");

document.write(require("./runoob2.js"));

npm install css-loader style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录

webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'

4.使用配置文件

上面使用webpack打包时需要手动指定loader，我们可以将一些编译选项放在配置文件中，以便于统一管理：

webpack.config.js 文件

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：

webpack