【webpack】入门Demo

概述

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack在开发中可以使用 JavaScript 处理你的依赖关系和加载顺序，避免意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库，使项目膨胀，或重复载入某些js,css等库。

使用webpack

初始化项目

mkdir webpack-demo && cd webpack-demo
npm init -y
创建并进入webpack-demo，初始化一个新的项目，并创建package.json文件，’-y’表示可接受package.json的一对默认值（多个npm使用技巧）

创建目录结构：

├── src
│ ├── main.js
│ ├── assets
│ │ ├── css
│ │ └── img
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock

安装

npm i webpack -D

webpack.config.js

配置信息
1. 入口（entry）：告诉webpack打包从哪里开始
2. 输出（output）：如何处理打包代码及打包输出到什么位置
3. 加载器（loaders）：通过loader识别出各种资源，将这些文件转换为模块
4. 插件（plugins）：由于加载器仅基于单个文件执行转换，插件可以做一些更复杂的操作及自定义功能

简单配置

    module.exports = {
        entry: './src/main.js',
        output: {
            filename: './dist/bundle.js'
        }
    }

运行

webpack
dist目录下生成bundle.js文件

webpack其他参数

* webpack -p – 进行优化压缩处理，相当于设置process.env.NODE_ENV="production"
* webpack --watch – 持续监听构建
* webpack -d – debug模式，包含source maps
* webpack --display-error-details - 显示详细的打包出错信息
* webpack -h 查看更多的信息，常见的还有--colors，--progress
* webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

加载更多资源 –使用loader

栗子：