4. 构建工具.md

构建工具 ——webpack

概览

• Node.js —— 运行环境

• npm 或 yarn —— 包管理工具

• webpack —— 打包构建工具 （开发时依赖）

npm i webpack --save-dev
yarn add webpack --dev/-D

• 其他依赖包，如jQuery

npm i jquery --save
yarn add jquery

webpack 最基本配置

• webpack.config.js

var path = require('path') // node.js的path
var webpack = require('webpack')

module.exports = {
    context: path.resolve(__dirname, './src') // 找到src目录
    entry: {
        app: './app.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

• package.json

script: {
    'start': 'webpack'
}

• 将构建好的 JS 引入 HTML (也可配置自动引入)

<script src="dist/bundle.js"></script>

依赖包使用

jQuery

// app.js
var $ = require('jquery') // 默认在 node_modules 中找

var $root = $('#root')
$root.html('<p>这是 jQuery 插入的文字</p>')

node环境支持CommonJS模块化开发

// a-util.js
module.exports = { // 导出一个对象
	print: function(){
        console.log(123)
    }
}

// a.js
var aUtil = require('./a-util.js')
aUtil.print()

代码压缩

// webpack.config.js
module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

webpack的最核心的基本功能：

• 模块化打包
• 代码压缩