webpack随笔

现在的前端技术日新月异，在这个大潮流下选对自己的技术栈我觉得还是很有必要的不一定要选最新潮的，但是实用却很重要。

一：webpack是什么

webpack是一款基于node.js的前端自动化工具。其本身相对于之前的gulp，grunt。虽有相似之处但是与后两者相比webpack更多的是多任务性。webpack自身只能实现对于js文件的打包。但是借助于各种各样的loader以及plugin的帮助下实现了功能的扩展使之具有了强大的功能。

二：webpack下载

        1:从npm下载webpack(npm install webpack -g) 可以从命令行运行webpack

        2:从你自己的项目目录下打开cmd输入 npm install webpack --save-dev 从而在自己项目中配置            webpack

三：webpack.config.js（运行webpack的时候webpack会自动在项目目录下寻找webpack.config.js并更具其中的配置运行webpack)

    var webpack=require("webpack");        

    var WebpackDevServer=require("webpack-dev-server");

    module.exports={

          entry:{

                blog:__dirname+"/src/js/index.js"

               },

        output:{

            filename:"[name].js",

            path:__dirname+"/src/js2",

            publicPath:"/js2"==》（适用于webpack-dev-server,方便后期项目的迁移或者是cdn对项目的管理）

        },

module:{

    loaders:[

        {test:/\.css$/,loaders:["style-loader","css-loader"]},

        {test:/\.less$/,loaders:["style-loader","css-loader","less-loader"]},

        {test:/\.less$/,loader:"less-loader"}

    ]    

    },

    devServer:{inline:true}

    }

四：配置文件具体解释

entry:项目入口文件

    1:可以是string类型==》“./index/index.js”;

    2:可以是一个对象==》“{a:"./index/index.js",b:"./index/index2.js"}

output:==>1:path==>文件打包之后的输出目录 2：filename==>文件打包后的名字html文件中引入的就是这个文件

loaders：

    1）test:匹配的文件类型

    2）loaders：使用的loader类型

plugin：对于webpack功能的扩充使之不仅仅是一个打包工具