webpack学习笔记（一）

webpack笔记


webpack是js的模块打包器。当用webpack处理程序时，它会递归的构造一个依赖关系图。其中


包含应用程序的的每个模块，然后将这些模块打包成少量的bundle。 通常只有一个，由浏览器加载。


1.入口Entry


2.出口Output


3.Loader
  
   webpack的 目标是，让webpack聚焦于项目中的所有资源（asset），而浏览器不需要关注这些。
   webpack把每个文件（.css,.html,.scss,.jpg,.etc）都作为模块处理。然而webpack自身只理解


javascript。


webpack loader 在文件被添加到依赖图中时，其转换为模块。


————————————————————————————————————————
在 更高层面，webpack配置中loader有2个 目标


1.识别出（identify）应该被对应的loader进行转换（transform）的那些文件。
2.转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到bundle中）(use 属性)


——————————————————————————————————————————
重要的是：在webpack配置中定义loader时，要定义在 module.rules中，而不是rules。




4.插件【plugins】


loader仅在每个文件的基础上执行转换，而plugins更常用于（但不限于）在打包模块


的“compilation”和“chunk”生命周期执行和定义功能。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可


以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需

要通过使用 new 来创建它的一个实例

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;