初始了解webpack

#webpack 是什么?

是一个打包器,是一个现代JavaScript应用程序的静态模块打包器

 

#webpack 工作原理?

就是当处理应用程序时,会递归的去构建一个依赖关系图,其中包含应用程序需要的每个模块

然后将所有这些模块打包成一个或者多个bundle.

 

#webpack的四个核心概念

入口(entry)

输出(output)

loader

插件(plugins)

 

#入口

入口起点:指示webpack应该使用哪个模块,来作为构建内部依赖图的开始.

进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的.

 

配置的例子:

module.exports={

 ebtry:'./path/to/my/entry.js'

}

 

#出口(output)

告诉webpack在哪里去输出它所创建的bundles,以及如何去命名这些文件.默认值是./dist

const parh=require('path');

 

module.exports={

 entry:'./path/to/file.js',

 output:{

     path:path.resolve(_dirname,'dist'),

    filename:'my-frist-webpack.bundle.js'

   }

};

filename 是告诉webpack bundle的名称

path 是告诉要生成(emit)到哪里

 

#loader

webpack 自身只能理解JavaScript文件,而当有一些非JavaScript文件时,就要用loader去处理

loader会将所有的文件转换成webpack能够处理的有效模块,应用程序的依赖图(和最终的bundle)可以直接引用的模块

loader有两个属性:

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

use:进行装换时,应该使用的loader

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

上面的代码告诉webpack如下信息:

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。

 

 

##插件

loader被用于转换某些类型的模块,而插件而是用于去执行更广的任务.

插件范围:打包优化,压缩,重新定义环境中的变量.

 

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

 

webpack.config.js(配置文件中去定义)

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

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

module.exports = config;