webpack安装流程

Webpack是目前前端开发流行的打包工具，现在来说一说Webpack的安装流程，以及基本打包方式

1、Webpack是什么？

Webpack是一个前端开发工具，可以让各个模块进行加载，预处理，在进行打包

2、Webpack有什么优点？

      <1>支持commonJS和AMD模块

      <2>支持很多模块加载器的调用，可以是模块加载器灵活定制

      <3>通过配置打包多个文件，有效的利用浏览器的缓存功能提升性能

      <4>使用模块加载器，可以支持sass、less等处理器进行打包支持静态资源样式及图片进行打包

3、为什么要使用它？

 因为在Webpack中，任何静态资源都可以被当做模块，模块之间可以相互依赖，通过webpack对模块进行处理后，

       可以打包成我们想要的静态资源

下载安装。以下安装方式是通过命令行完成的

 1、 因为Webpack依赖node环境，所以应首先安装node，查看node安装

       

安装成功后在命令行敲：webpack -v，查看版本信息;

先初始化项目：npm init

  2、  接下来安装webpack:通过命令行敲入：npm install webpack -g

 3、 在一个盘下，创建一个文件夹，可以通过命令行进入相对应的文件夹中（我在D盘下创建了一个名为webpack的文件夹）
在webpack文件夹中有我们正常项目的一些文件夹如：css,js,index.html等；

 4、 先简单的用webpack简单的打包一下JS文件，在命令行中敲入：webpack ./js/index.js ./dist/index.boundle.js

打包成功后就可以在dist文件夹下找到index.boundle.je这个文件，因为各种兼容，所以可能会比打包之前要大

5、 简单的JS打包成功后，来打包含有CSS，JS的文件；因为webpack支持AMD,DMD,ES6所以我们在打包的JS文件中引入咱们想打包的CSS文件和其他的JS文件；例：

现在不能还不能直接进行打包，虽然webpack可以打包任何资源，但是需要对应的 loader，所以需要一个配置文件,在当前文件夹下创建一个名为

webpack.config.js的一个文件

6、 这个文件名子固定的webpack.config.js，具体操作如下（这个是CSS的loader，需要图片上网百度即可）

module.exports = {
    //声明入口
    entry: './js/index.js',	//需要打包的文件
    //输出文件
    output: {
        path: __dirname,//不要动！固定写法 是指获取当前文件的据对路径，会根据路径不同自动获取
        filename: './dist/js/index.boundle.js'	//这个是打包到哪去，或者输出到哪去
    },
    module: {	
        loaders: [
		// 这个是指匹配所有CSS文件 ->>/\.css$/
 {test: /\.css$/, loader: 'style-loader!css-loader'}//2.0版本之后后面都要加-loader,之前版本自动添加 ] }}

7、 配置好文件之后，在命令行内敲入相对应的CSS（或者图片）：npm install css-loader --save-dav

  安装相对应的的配置后，可以到初始化自动生成的package.json中找到相对应的内容

8、然后就可以在当前文件夹下的命令行内直接敲入webpack即可，因为配置都已经配置好了