webpack基本使用笔记

什么webpack?

webpack是前端的一个模块化管理工具,他可以根据代码的require依赖,将互相依赖的文件整合打包到一个js文件中,这样html页面只需要引用一个js文件,代码也能正常执行.

webpack安装

webpack中文指南

webpack使用

a依赖b,cmd命令中输入webpack a.js bundle.js a.js b.js合并生成一个新的bundle.js文件.

配置webpack.config.js

cmd中输入命令: webpack，当我们按下回车键,webpack会读取webpack.config.js文件，得到我们暴露的对象,会自动合并,用我们配置的loader

watch

在输入webpack命令时加个这个参数webpack --watch
-- watch会自动监视文件的变化，当文件变化后，自动重新打包

webpack-dev-server

作用，能够开启一个http服务器,内部也会调用webpack
还能做到当代码变了之后，自动更新页面
使用时，就不在命令使用webpack命令,把webpack命令改成:webpack-dev-server
还能在打包时自动打开浏览器访问我们的页面
--port 8080 --progress --open 指定端口
基本配置

//引入path模板
const path = require('path')
//定义一个对象
const obj  = {
  // 指定入口文件,最终依赖文件
  entry:{
    app: './a.js'
  },
  // 指定打包后的文件保存位置
  output:{
    // path 指定保存的文件夹位置,要指定绝定路径 __dirname只当前目录地址
    path: path.join(__dirname,'dist'),
    // 指定保存的文件名
    filename: 'bundle.js'
  },
  module:{
    loaders:[
    // 每一个loader要指它要处理的文件
     {
      // 指定一个正则,匹配css后缀的文件
      test:/.css$/,
      // 指定要用哪个 loader来处理test规则中指定的文件
      loader: 'style-loader!css-loader'
     }
    ]
  }
}
module.exports = obj

css合并

test:/.css$/      //正则匹配
loader:'style-loader!css-loader' //css-loader合并css到js中,style0loader把合并到js中的css添加到页面上

less合并

test:/.less$/      //正则匹配
loader:'style-loader!css-loader!less-loader' //less-loader把less转成css,css-loader合并css到js中,style0loader把合并到js中的css添加到页面上

js合并

  module:{
    loaders:[
      {
        test: /.js$/, // 匹配的是js文件
        loader: 'babel-loader', //js语法转换 es6-es5 其他写法-es5
        // query是webpack里的属性
        query:{
          // presets是babel-loader的属性
          //指定bable-loader中内部要使用的包
          // 这个es2015对应 babel-preset-es2015这个包  把es6转成es5
        presets:['es2015']
        }
      }
    ]
  }

url-loader

能够处理css中引用的图片,能够把图片为base64编码的字符串
也可以加条件判断，如果图片小就转换为base64

    module: {
        loaders: [
        {
          test: /.css$/,
          loader: 'style-loader!css-loader'
        },
        {
          // url-loader处理图片
          test: /.(jpg|jpeg)$/, //匹配图片文件
          loader:'url-loader',    //图片转换成base64编码的字符串
          query:{
            // 这个limit是url-loader需要，用来指定当图片小于多少时才转换成base64
            limit: 10086, //单位字节byte
            // 如果图片比limit限制的大小在，就会生成一个新的图片,和原来图片一样
            // 生成到 output.path所在目录
            // name是指定生成的图片的名字
            // [name]表示原文件名, [ext]表示原文件后缀.
            name:'[name].[ext]'
          }
        }
        ]
    }

html-webpack-plugin

自动把src的html复制到输入目录,并且能够自动引入合并后的文件（就是在html中插入了一个script标签）

// 复制生成html到dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry:{
    app: './src/index.js'
  },
  output:{
    path: path.join(__dirname,'dist'),
    filename: 'bundle.js'
  },
  plugins: [


  // 能够自动生成index.html文件到 ouput.path对应的目录
  // 还能帮我们引入打包后的文件到生成的index.html中
  new HtmlWebpackPlugin({
    // 最终就会把这个./src/index.html生成到dist目录
    template: './src/index.html'
  })
  ]
}