WebPack 入门

(1). WebPack是什么

WebPack是一个JavaScript应用程序静态模块打包器(module bundler),当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph). 其中包含应用程序需要的每个模块,然后将所有的这些模块打包成一个多个bundle(bundle有点感觉像OSGI的概念).

(2). webpack安装

# 全局安装webpack和webpack-cli
lixin-macbook:~ lixin$ npm i webpack@4.43.0 webpack-cli@3.3.11 -g

(3). webpack配置文件详解

entry : 入口文件.
output : 打包后输出的文件.
module : 用于处理各种类型(js/css/html)的文件.
plugins : 插件.
resolve : 路径指向.
watch : 不退出命令行,一直监听文件变化.

const path = require('path');

module.exports = {
    entry: "./modules/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    watch:false
}

(4). webpack打包

lixin-macbook:webpack-example lixin$ webpack --mode development --watch

(5). 更多请参考官网

“webpack官网”