1.webpack由浅入深

1.webpack概念：

webpack是一个静态模块打包机， webpack处理应用程序时，把一个项目当作整体，通过一个给定的主文件开始找到所有的依赖文件，构建一个依赖关系图（这个依赖关系图包含应用程序需要的每个模块），然后使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。

2.四个概念核心：

1.入口（entry）：

入口：指示webpack应该使用哪个模块，来作为构建内部依赖关系图的开始。进入入口起点后，webpack会找出这个入口起点的所有依赖的模块和库。

 例子：
   module.exports = {
  entry: './path/index.js'
    };

2.出口（output）：

出口：告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件。

  例子：
  module.exports = {
  entry: './path/index.js'，
  output: {
   path: path.resolve(__dirname, './dist'),
   filename: 'my-first-webpack.bundle.js'
  }
  };

3.loader：

loader：webpack本身只能理解js，loader就是将所有类型的文件转换为webpack能够处理的模块，然后让webpack去处理这些文件。

loader属性：

test ：标识出应该被对应的 loader进行转换的某个或某些文件

use ：进行转换时，应该使用哪个 loader

例子：
const config = {
 output: {
  filename: 'index.bundle.js'
  },
  module: {
  rules: [
  {
   test: /\.css$/,
   use: 'css-loader'
  }
  ]
   }
  };

注意：对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use

4.插件（plugins）：

插件：扩展weboack的功能，执行范围更广的任务，可以用来处理各种各样的任务。

   例子：
  const config = {
  module: {
  rules: [
  { test: /\.txt$/, use: 'raw-loader' }
  ]
  },
 plugins: [
  new HtmlWebpackPlugin({template: './src/index.html'})
  ]
  };

1.webpack由浅入深 浏览：439

1.webpack由浅入深浏览：439