学习总结 -- 朱凯

webpack

webpack是前端资源块化管理的一种打包工具,在项目中webpack会根据依赖进行静态分析,形成静态资源,通过异步I/O和多级缓存来提shengc高我们系统的性能.

安装webpack

npm install webpack -g          //全局安装webpack
mkdir test && cd test           //创建项目文件夹
npm init                        //初始化项目,生成package.json文件
npm install webpack --save-dev  //在项目内安装开发过程需要用到的webpage

webpack本身只可以识别JavaScript文件,所以我们需要安装loader,loader可以将要用到的css资源,图片资源等等转换为js格式的资源来让webpack识别转换.

安装loader(以css-loader为例)

npm install css-loader

配置webpack文件

在项目下新建一个名为webpack.config.js的文件

var htmlWebpackPlugin = require('html-webpack-plugin');   //引入插件
var webpack = require('webpack')      //引入webpack
moudle.export ={  
    entry: './src/js/index',          //入口文件
    output:{                          //输出配置
       path:__dirname + '/build',     //输出文件地址(__dirname为webpack.config.js所在目录)
   },
   module:{                           //添加模块
        loaders:[                     //模块加载器
            {
              test:/.css$/            //搜索以css后缀名的正则
              loaders:['style','css'],//使用的加载器
            },
            {
              test: /.jsx?$/,
              loader: 'babel-loader',
              exclude: /node_modules/, //打包时会过滤掉的文件
              query: {
              presets: ['es2015']      //babel转译类型,需要npm安装
                 }
            }
        ]
    },
    plugins: [                         //插件
        new htmlWebpackPlugin({        //第三方插件(需要npm安装)
            title:'reactjs',
            filename:'index.html'
        })
    ],
     resolve:{
        extensions:['','.js','.css','jsx']//自动补全后缀，所以在页面引用的时候不用写这些后缀名
    },

}

运行

webpack         //webpack会自动找到webpack.config.js文件根据文件打包

监听

$ webpack --progress --colors --watch    //修改模块后都重新编译，可以启动监听模式