webpack学习笔记(1)

webpack学习笔记(1)

webpack概念-代码打包工具，给定一个入口文件，找到这个文件所依赖的模块和这个依赖模块所依赖的模块，用loaders来处理这些模块，使得浏览器可以识别这些模块的语法。

为什么要使用webpack

随着用户界面的复杂度提升，前端的业务逻辑也变得多和复杂，为了提高开发效率，出现了许多的解决方案。

• sass less stylus这类的提高css代码复用的预处理器
• ES6的新特性语法
• 前端的MVVM框架的模块化开发
• ......

运用了这些开发效率确实有所提升，但是也出现新的麻烦事，那就是代码的解析，像sass less这些css语法、ES6的新特性，浏览器都不能解析运行，我们还要手动去把sass、less等转成css语法，把ES6语法转成ES5语法。这实在是麻烦。使用webpack就能够实现自动打包。当然，webpack做的还不只是打包，使用webpack插件，还能实现热更新、代理服务、代码压缩，删除代码的重复引用部分等。通过webpack打包实现代码的异步加载，也提升了代码的运行效率。

webpack的几个部分

entry--文件入口

entry的几种写法

     module.exports = {
         //入口文件 打包的入口 入口可以多个
         entry:'index.js' //路径
     }

     module.exports = {
         entry: ['index.js','index2.js']
     }

    module.exports = {
        entry:{
            index: 'index.js'
        }
    }

output--文件出口,打包生成的文件的描述(bundle),当有多个entry时，这样写，打包出来后，fileName将会根据entry的名字不同而不同。

    module.exports = {
        entry:{
            index: 'index.js',
            index2: 'index2.js'
        },
        output:{
            filenName : '[name].main.[hash:5].js'
        }
    }

loader--解析 css less es6等,不仅仅是js了

    module.exports ={
        module:{
            rules:[
                {
                    test: /\.css$/,
                    use: 'css-loader'
                }
            ]
        }
    }

plugins--应用插件可以处理代码（压缩代码 提取变量 混淆代码）

    const webpack = require('webpack')
    module.exports ={
        plugins: {
            new webpack.optimize.UglifyJsplugin()
        }
    }