更博不能忘——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文件。

demo08

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

html的一些插件很厉害，比如上面两个，当你输入webpack-dev-server，会主动为你创建index.html并会为你新打开一个tab页，不用你亲自创建和打开页面了。【其实我觉得这个功能也就还好啦~】

demo09

通过环境标志让一些代码在只有开发环境下启用

main.js

document.write('<h1>Hello World</h1>');

if (__DEV__) {
  document.write(new Date());
}

webpack.config.js

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};

demo10

webpack可以通过你的标记帮你把一个文件分离成几块，并且可以按需加载

首先，你需要定义一个分割点

// main.js
require.ensure(['./a'], function(require) {
  var content = require('./a');
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

。。。

【笔者想在实践后再来解释这一点】

 

demo12

当多个script中有公共的块，用CommonsChunkPlugin插件可以提取公共的块

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: {
    bundle1: './main1.jsx',
    bundle2: './main2.jsx'
  },
  output: {
    filename: '[name].js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
    ]
  },
  plugins: [
    new CommonsChunkPlugin('init.js')
  ]
}

【笔者想在实践后再来解释这一点】