首页 > 代码库 > 更博不能忘——webpack学习笔记

更博不能忘——webpack学习笔记

webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不用会忘掉一丢丢,但是看过脑海中还是有印象的。

webpack能够用作模块加载和打包类似Browserify,且能做更多。类似上诉模块管理工具都会有一个相应的配置文件,用于说明,你打包的文件,包装的模块等。

webpack常用命令:

webpack -p 压缩混淆脚本

webpack --watch 监听变动自动打包

webpack -d 生成map映射文件,告知哪些文件被打包到哪里了

webpack-dev-server 发送关于编译状态的消息到客户端,客户端根据消息作出响应

根据阮大大的demo记录学习笔记如下:

demo01

module.exports = {
  entry: ‘./main.js‘,
  output: {
   path: ‘./js/‘, filename:
‘bundle.js‘ } };

  entry:(1)字符串:定义入口文件

       (2)数组:同样包含入口文件,也可以配置静态资源服务器

  output:对象,定义文件的输出,包含路径和文件名两个参数。

demo02

module.exports = {
  entry: {
    bundle1: ‘./main1.js‘,
    bundle2: ‘./main2.js‘
  },
  output: {
    filename: ‘[name].js‘
  }
};

   当entry中的入口文件比较多时,output中的filename可以如上书写,用来定义不同文件的名字

demo03

module.exports = {
  entry: ‘./index.js‘,
  output: {
    filename: ‘bundle.js‘
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: ‘babel-loader?presets[]=es2015&presets[]=react‘ },
    ]
  }
};

  module:定义了对模块的处理逻辑,

    loaders:定义了一系列加载器,loader转换器—webpack本身只能处理原生JavaScript模块,但loader转换器可以将各种类型的资源转换成JavaScript模块。[看到这里,我的表情就想是papi酱,每次竖起大拇指的表情一样,棒~]

      test:通过一些正则规则,来为不同文件定义不同加载器

demo04


  module: {
    loaders:[
      { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
    ]
  };

  引入css文件需要两个加载器,两个加载器之间用!连接。

demo05

module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
    ]
  }

  url-loader是图片的加载器,当图片小于8192b时自动处理为base64编码。?用于标记传入加载器的参数。

demo06

module: {
    loaders:[
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: ‘babel-loader?presets[]=es2015&presets[]=react‘ },
      { test: /\.css$/, loader: ‘style-loader!css-loader?modules‘ }
    ]
  }

  通过?传进去的参数说明,css文件中的样式默认是给module中的标签的,除非加了特殊说明,如下:

:global(.h2) {
  color: blue;
}

demo07

var webpack = require(‘webpack‘);
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: ‘./main.js‘,
  output: {
    filename: ‘bundle.js‘
  },
  plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

plugins插件使webpack能做的事儿更丰富,webpack本身内置了一些插件,也可以通过npm安装第三方插件,如上 uglifyJsPlugin用来压缩js文件。

【持更。。。】

 

更博不能忘——webpack学习笔记