webpack工程化

webpack是什么

webpack可以看作是一个模块打包机，功能就是通过一个入口将所有的依赖关系(像.jade,.less,.png等)通过webpack打包器打包成我们所谓的前端静态资源(像js,css,png等)。(module模块 => webpack => 静态资源)

为什么要用它，它可以做什么

在webpack之前也有很多打包工具，如grunt,gulp...但是这些打包工具功能单一，只能完成特定任务。但一个web前端工程是复杂的，一个webapp的业务代码可能有很多，如想按需加载，首屏加载时间减少，需集成一些第三方库...
webpack 的出现正是为了解决这些问题，在 webpack 中，提供了一下这些功能：

• 代码转换：比如将es6转化成es5,将less,sass转化成css
• 文件优化：比如压缩代码体积
• 代码分割：比如公共模块的分离，路由懒加载
• 模块合并：比如按照功能将多个模块合并成一个模块
• 自动刷新：热更新
• 代码校验：校验代码是否符合规范
• 自动发布

使用webpack有什么优势

1.万物皆模块： 在 webpack 的世界中，除了 Javascript，其他任何资源都可以当做模块的方式引用。
2.按需加载： webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是毕需，这也是 webpack 出现的根本原因。
3.可定制化： 任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack 基于可定制化的理念构建，通过插件系统，配置文件，可以实现大型项目的定制需求。

了解了webpack的一个大致情况后，那我们要怎么去用它呢？

webpack基础配置（怎么写）

在此之前你应该已经安装过node

1.安装本地webpack

npm install webpack webpack-cli -g
npm install webpack-dev-server -g

会生成node_modules,package-lock.json文件

2.webpack的使用

// src => name.js
module.exports = 'my name is lzzhy'

// src => index.js
let str = require('./name.js')
clg(str)

这样肯定是可以在node中运行的，如下图：
![cmd-markdown-logo](https://lzzhy.oss-cn-beijing....
)
但是我们需要产出的结果运行在浏览器上，也就是在dist产出中得到结果，因此需要去配置文件。

3.配置文件的使用

在项目目录下创建 webpack.config.js如下,运行npx webpack会按照配置文件生成对应dist:

// webpack 是node写出来的 node的写法
var webpack = require('webpack')
let path = require('path')
module.export = {
    mode: 'development', // 模式 默认两种proction development
    entry: './src/ndex.js', //入口
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname,'dist') //路径必须是一个绝对路径, _dirname指相对该路径下
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //处理.js或.jsx文件loader
                query: {
                    presets: ['env']
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"   //处理.css文件loader
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'    //处理图片loader
            }
        ]
    }
}

webpack只能处理js模块，如果要处理其他类型的文件(如css)就需要使用loader进行转化，指用一段代码来替换另一端代码的webpack加载器。

通过这样一个简单的配置（当然webpack的配置不止这一点），就用webpack打包机将模块转化成了静态资源。

更多请参考我的博客