webpacke

webpack

• 是一个【模块化管理工具】兼【打包工具】

• 是一个工具(和seajs,requirejs管理前端模块的方式是不一样)

• 在webpack一个文件就是一个模块!

• seajs,requirejs

  • 模块化!

• webpack也能对前端资源进行模块化管理!

  • 不是某个要在页面引入的js文件

  • 是一个工具

  • webpack允许我们在前端代码像node代码一样去引入一个包(文件)

  • webpack会把我们写的类似node的模块化方式，做转换，使其他能够以浏览器中运行

  • module.exports = '小明' // xx.js

  • require('./xx.js') // a.js

安装webpack

• npm install -g webpack

  • 带-g参数表示全局安装!

• 通过webpack来管理我们的代码，那么我们的代码一般是不会暴露到全局的!

基本使用

• 我们在前端代码像使用node代码一样用module.exports及require来管理(描述)模块的依赖关系, 但是这样的代码是不能直接在浏览器中运行的

    var myjack = require('./jack.js')

    var myrose = require('./rose.js')

    console.log(myjack.money)

• 我们需要使用webapck来管理(转换)我们的代码,使其符合浏览器的规则!

  • webpack <入口文件名> <输出文件名>

  • webpack会把我们在代码所依赖的文件(通过require获取的文件)合并到一起!

  • 并且【不会产生全局变局】(除非显示的通过window点一个属性)

dist

src

通过配置文件的方式使用webpack

• 在项目目录添加:webpack.config.js文件

• 在文件中添加以下内容

    // 这个webpack的配置文件

    // 要求在这个文件中暴露一个对象

    // 按照node的请求去写就可以了!

    module.exports = {

      // 这个属性表明，整个项目的入口文件是谁

      entry:'./src/app.js',

      // 这个属性表示，我们项目通过webpack打包后的输出文件及输出路径

      output:{

        filename:'./dist/bundle.js' // 指定输出的文件名

      }

    }

• 直接在当前目录的命令行，执行命令：webpack就可以了!

将css也合并到js代码中

css-loader 和 style-loader

• css-loader,把css合并到js中(没有添加dom操作，也就是没把css添加到页面中)

• style-loader,把css-loader处理的结果添加到页面(dom)中

  output:{

    filename:'./dist/bundle.js' // 指定输出的文件名

  },

  module:{

    loaders:[ // Loaders是提供了一些特定的功能

        {

          // 表明我们(用到的loader)要处理的文件是什么

          test:/\.css$/,  // 要把指定的css加入到js中

          // loader属性指定具体的loader,这个loader其实是一个npm外

          // css-loader就是一个npm 包！

          // `npm install css-loader --save-dev`

          // css-loader只是把css代码加入到js代码（并没把样式添加到dom中）

          // style-loader 这个loader这为了把css-loader得到css样式添加到dom中

          //

          // webpack会先调用!右边的包来处理我们的文件，然后把!右边处理的结果交给左边的包来处理!

          loader:'style-loader!css-loader'

        }

    ]

  }

less-loader

• 作用: 这个loader会读取匹配的less文件，然后把less文件内容转换为css内容

  一般会配合css-loader 和 style-loader一起使用!

• 注意，下载less-loader会缺少一个less包：npm install less --save-dev，这个需要另外单独安装!

  require('./xxx.less') // 用到的less文件要引入才能生效！

  module.exports = {

  entry: './src/app.js',

  output:{

    filename:'./dist/bundle.js'

  },

  module:{

    loaders:[

      {

        test: /\.less$/ ,// 匹配当前loader要处理的文件

        // less-loader作用:是读取test规则对应的文件，然后把读取到的less文件内容转换为css内容

        loader:'style-loader!css-loader!less-loader'

      }

    ]

  }

}

sass-loader

• 安装: npm install sass-loader --save

• 作用： 这个loader会读取匹配的scss文件，然后把less文件内容转换为css内容

• 注意,sass-loader的依赖包node-sass和webpack不会自动安装上

  需要手动安装:npm install node-sass webpack --save-dev

url-loader

• 作用: 是能css中使用的图片进行处理，如果图片比指定的条件小，就转换为base64

  如果比指定的条件大就不转换

• 注意，安装时会缺少一个file-loader包:npm install file-loader --save-dev

  • 这个file-loader里会有文件操作!

• css: bg:url()

• 在css中有好小图标,可能有100个，浏览器会再发100个请求!

• 如果能够把这个100个请求合成1个，或者0个就更好了!

// base64

  module.exports = {

  // 指定入口文件

  entry:'./src/app.js',

  output:{

    path:'dist',// path指定父目录，webpack会把path与filename拼接成一个路径

    // 同时是指定默认文件的生成目录

    filename:'bundle.js'

  },

  module:{

    loaders:[

      {

          test: /\.css$/,

          loader:'style-loader!css-loader',// 从右往左执行!

      },

      {

        test:/\.(jpg|jpeg)/,

        // 这里的./是相对于path属性指定的目录

        // name参数指定如果不生成base64时，文件的输出目录及输出的文件

        // [name]表示原文件名,[ext]表示源文件扩展名

        // 如果不指定name参数，输入的图片名是随机的

        // limit: 限制转换的大小

        // 值的单位是字节,byte

        // 1byte = 8bit (位)  字节

        // 1kb = 1024 字节

        // 1M = 1024kb

        // 1000

        loader:'url-loader?limit=12048&name=./img/[name].[ext]'

      }

    ]

  }

}

babel-loader

• npm install babel-loader --save-dev

• *注意：安装时还需要安装babel-core:

• npm install babel-core webpack --save-dev*

• 如果是对es6进行请求转换，还需要安装:

  npm install babel-preset-es2015 --save-dev

• 依赖于babel这个工具!，是在webpack中使用的,可以进行多种语法转换!

  • babel可以用来进行多种语法转换，

• 写代码时，用es6，在写完之后，再用工具转换为es5

    // 配置文件

    module:{

        // 这里是我们webpack打包用到的loaders

        loaders:[

          {

            test:/\.js$/,

            // 也需要一些参数，babel不令是能转换es6，还能将react的语法转换成js

            loader:'babel-loader',

            query:{

              // 这个es2015也是对应了一个npm 包

              // npm install babel-preset-es2015 --save-dev

              presets:['es2015']

          }

        ]

      }}

对第三方包进行分离

• 把我们项目用到的包(如果有第三方包，我们分打包合并!)

• 一个可以利用浏览器缓存对第三方包进行缓存!

• 其实就是我们自己写的文件打一个包，其他第三方我文件打一个包!

// 入口文件目录

  entry:{

    app:path.join(__dirname, 'src/app.js'),

    // 随便写一个属性，值为数组，数据中的元素是我们希望单独打包的第三方包的名字

    vender001:['angular']

  },

  // 输入路径

  output:{

    // 输出的文件目录

    path: path.join(__dirname, 'dist'),

    // 输出的文件名(也就是打包后的文件)

    filename:'bundle.js'

  },

    // 这个属性里写上webpack中要使用到的插件

  plugins:[

    // 要使用webpack自的插件来分离第三方包

    new webpack.optimize.CommonsChunkPlugin(

      // 第一个参数，就是我们在entry写的一个属性名

      // webpack会自动读取对应的值，找到相应的包

      'vender001',

      // 第二个参数，是第三方包单独打包后生成的文件名

      'vender.js'

    )

  ]

webpack 插件

自动打开浏览器插件(open-browser-webpack-plugin)

• github地址

创建index.html插件(html-webpack-plugin)

• github地址

  // npm install html-webpack-plugin --save-dev

const  HtmlWebpackPlugin = require('html-webpack-plugin');

  plugins:[

  new HtmlWebpackPlugin({

    template:'./src/index.html'  // 指定模板,最终生成的html会生成到path属性对应的位置

  })

  ]

删除目录插件(clean-webpack-plugin)

• github地址

拷贝文件插件(copy-webpack-plugin)

• github地址

webpack 相关参数

• 1. --watch,自动监视文件，重新打包
• 2. --progress 在打包进可以看到进度
• 3. -p 压缩js代码
• 4. -d 生成js代码对应的.map文件(

  当我们打调试工具时，浏览器会自动请求与压缩的js文件同级目录的js文件名.map文件

  这个文件中的内容表示我们的代码是如何压缩的!)

react快速开始

• 快速开始地址