webpack使用总结

什么是webpack:

　　webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

原理：

　　引用官网的一张图

　　把项目当做一个整体，通过一个给定的主文件（如：app.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

开始使用Webpack

　　安装大环境

1 先安装nodejs
2 nodejs中文站：
3     http://nodejs.cn/
4 安装webpack 
5     npm install  -g webpack

　　初始化项目

　　

1 npm init

1 package name: (blog) test // 项目名字
2 version: (1.0.0) // 版本号
3 description: webpack-blog  // 描述
4 entry point: (index.js)
5 test command:
6 git repository:
7 keywords:
8 author: allen
9 license: (ISC)

　　全部成功之后会多出来这个文件

　　

　　package.json文件配置完毕，安装依赖

　　

1 npm install webpack --save-dev   // dev是生产环境 如果上线了也需要的话，就写--save
   --save-dev  ==> -D
   --save  ==> -S

　　

　　这个modules不需要传到服务器上

　　

　配置webpack

　　创建webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',    // 开发模式
    entry: './src/app.js',  // 入口文件
    output: {               // 出口文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    
};

　　一切就绪，git里运行webpack命令

以上是基本使用的操作，欢迎交流。