webpack起步

1.安装webpack

       前提条件        :  已经安装了Node.js的最新版本(LTS---long term support),

                                  已经初始化package.json文件(npm -y init).

       本地安装        :  npm install --save -dev webpack

       全局安装        :  npm install  -global webpack

       安装指定版本:  npm install  --save -dev webpack@<version>

        参考: https://doc.webpack-china.org/guides/installation/#-

2. 配置文件

       根目录新建webpack.config.js文件,

       eg.  const path=require('path');

                       module.exports= {

                       entry:__dirname+"/js/index.js", 

                       output: {

                              path:path.resolve(__dirname,'bundle'),

                              filename:'bundle.js'

                        },

                       devtool:"source-map",

                       module: {

                                          rules: [

                                                          {

                                                                 test:/.js$/,

                                                                 use:'babel-loader'

                                                         }

                                         ]

                      }

             }

            <一>入口(entry) --- 指定某个模块作为构建内部依赖图的开始

            <二>出口(output) ---指定webpack输出所创建的bundles以及对bundles的命名.

            <三>loader---

                  识别出应该被对应的 loader 进行转换的那些文件(使用test属性);

                   转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use属性)

            <四>devtool:

                   此选项控制是否生成，以及如何生成 source map,

                   (参考: https://doc.webpack-china.org/configuration/devtool/)

            <五>__dirname : node中的全局变量, 存储的是文件所在的文件目录,这里就是项目根目录.

                    __filename : node中的全局变量, 存储的是文件名.

                    path.resolve()方法会把一个路径或路径片段的序列解析为一个绝对路径

                                 ---参考:http://nodejs.cn/api/path.html#path_path_resolve_paths