webpack的使用

模块化开发

传统的js拆分文件并依次将文件引入HTML中，仅仅是代码的累加，而且每个js中的作用于相互独立，必须通过全局变量来暴露变量。

解决办法：像node一样去组织前端代码，遵循CommonJS规范，该规范定义了模块定义和使用的方式。
**webpack就是一个在客户端实现CommonJS规范的工具，**可以将CommonJS代码打包到一个JS文件中。 webpack官网

module.export = {name:''}  //暴露模块
var  a = require('a.js')  // 获取模块

webpack的基本使用

安装webpack

1. 本地安装
   cnpm install --save-dev webpack
2. 全局安装
   cnpm install --global webpack

webpack官方文档

在HTML中需要引入webpack打包后的文件。

webpack打包

配置信息:/webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './main.js',  // 入口文件
    output: {  //输出文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'out.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    }
};

打包命令：webpack
** 多入口配置 **， 参考文章

module.exports = {
  entry: {
    'index': './src/view/index/index.js',
    'login': './src/view/login/login.js',
  },

目录结构：

webpack监控模式，热部署

当修改相关文件后 ，会自动重新打包

·webpack --watch

从github克隆项目到本地

1. 执行：git clone https://github.com/zce/music-player.git
   切换到项目目录
   package.json:
   
2. 安装依赖模块
   使用淘宝镜像安装：淘宝npm镜像
   npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

print('hello world')