模块化管理工具兼打包工具 webpack

时间  2019-11-16
标签 模块化 管理 工具 打包 webpack 繁體版
原文   原文链接

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点一个属性)

经过配置文件的方式使用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添加到页面中)
    +npm install css-loader --save-dev
  • style-loader,把css-loader处理的结果添加到页面(dom)中
    +npm install style-loader@0.13.1 --save-dev
    +注意：这里的命令必定要指定版本号，不然出错
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个就更好了!
  • 注意：只可以处理css的图片，为何要处理css的图片呢，由于css图片更多的时候是图标，而html中
    直接写一个img的话，通常图片是比较大的，不须要转换为base64，转换的话反而得不偿失，若是是html
    图片的话，咱们用的是懒加载来解决问题

// base64javascript

module.exports = {
  // 指定入口文件
  entry:'./src/app.js',
  output:{
    path:'dist',// path指定父目录，webpack会把path与filename拼接成一个路径 
    // 同时是指定默认文件的生成目录 
    filename:'bundle.js'
  },
  module:{
    loaders:[
         // 这里要分开写，写两个loader,由于他们用法不同，一个用来css语法转换，
          // 一个用来css里面的图片转换
      {
          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

  • babel-loader依赖于babel这个工具!，是在webpack中使用的,能够进行多种语法转换!
    • babel是独立的一款工具，能够用来进行多种语法转换，
    • 补充：在浏览器直接引入Browser.js也能够进行语法转换，可是转换性能比较 低一些

  • 写代码时，用es6，在写完以后，再用工具转换为es5（为何要写es6呢，由于我想体验es6的简洁写法，
    那为何又要转换为es5呢，由于浏览器的兼容性问题）css

  • 安装npm install babel-loader --save-dev
  • *注意：安装时还须要安装babel-core，:
  • npm install babel-core@6.0.0 webpack --save-dev* 你也能够根据提示，看看提示你缺什么，你就安装什么
  • 具体版本号，看提示

  • 若是是对es6进行请求转换，还须要安装:
    npm install babel-preset-es2015 --save-devhtml

// 最终这个配置文件 是由node去解析

const path = require('path')   //须要引入path模块
const webpack = require('webpack')

module.exports = {
  // 入口文件目录
  // 由于咱们要分开打包，因此不止一个入口
  entry:{
    // 在这里写路径的时候推荐把绝对路径也写上，把路径完整地写上来
    // 在任何模块文件内部，可使用__dirname变量获取当前模块文件所在目录的完整绝对路径
    app:path.join(__dirname, 'src/app.js'),

    // 随便写一个属性，值为数组，数组中的元素是咱们但愿单独打包的第三方包的名字
    vender001:['angular']
  },

  // 输入路径 
  output:{
    // 输出的文件目录
    path: path.join(__dirname, 'dist'),
    // 输出的文件名(也就是打包后的文件)
    filename:'bundle.js'
  },
  module:{
    // 这里是咱们webpack打包用到的loaders
    loaders:[
       {
        test:/\.js$/,
        // 也须要一些参数，babel不只仅是能转换es6，还能将react的语法转换成js，
        // 因此咱们要经过query这个属性来指定一下转化为那种
        loader:'babel-loader',
        query:{
          // 这个es2015也是对应了一个npm 包
          // npm install babel-preset-es2015 --save-dev
          presets:['es2015']   //这个presets是babel里面的一个属性
        }
       }
    ]
  }
}

对第三方包进行分离

  • 这个分离不是必须的
  • 把咱们项目用到的包(若是有第三方包，咱们分打包合并!)
  • 一个能够利用浏览器缓存对第三方包进行缓存!
  • 其实就是咱们本身写的文件打一个包，其余第三方我文件打一个包!
// 入口文件目录
  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)

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

// 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)

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

webpack 相关参数

    1. --watch,自动监视文件，从新打包
    1. --progress 在打包进能够看到进度
    1. -p 压缩js代码
    1. -d 生成js代码对应的.map文件( 当咱们打调试工具时，浏览器会自动请求与压缩的js文件同级目录的js文件名.map文件 这个文件中的内容表示咱们的代码是如何压缩的!)
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程