webpack之loader与plugin

webpack常见配置：

// 入口文件

 entry: {

  app: './src/js/index.js',

 },

 // 输出文件

 output: {

  filename: '[name].bundle.js',

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

  publicPath: '/'   //确保文件资源能够在 http://localhost:3000 下正确访问

 },

 // 开发者工具 source-map

 devtool: 'inline-source-map',

 // 创建开发者服务器

 devServer: {

  contentBase: './dist',

  hot: true        // 热更新

 },

 plugins: [

  // 删除dist目录

  new CleanWebpackPlugin(['dist']),

  // 重新穿件html文件

  new HtmlWebpackPlugin({

   title: 'Output Management'

  }),

  // 以便更容易查看要修补(patch)的依赖

  new webpack.NamedModulesPlugin(),

  // 热更新模块

  new webpack.HotModuleReplacementPlugin()

 ],

 // 环境

 mode: "development",

 // loader配置

 module: {

  rules: [

   {

    test: /\.css$/,

    use: [

     'style-loader',

     'css-loader'

    ]

   },

   {

    test: /\.(png|svg|jpg|gif)$/,

    use: [

     'file-loader'

    ]

   }

  ]

 }

打包原理

• 识别入口文件
• 通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）
• webpack做的就是分析代码，转换代码，编译代码，输出代码
• 最终形成打包后的代码

loader：就是一个转换器，将A文件进行编译形成B文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程。Loader让webpack能够处理不同的文件。在webpack中loader有两个目标：

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

对应webpack.config.js中的module属性：

module:{

rules:[{
     test:
     use:
     include/exclude:
     query:
    },

     ......

]}

test：用于匹配处理文件的扩展名的表达式，必须
use：loader名称，就是要使用的模块名，必须
include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹），可选
query：为loader提供额外的设置选项，可选

其中，use有三种写法：

（1）直接用use：

use:['style-loader','css-loader']

（2）将use换成loader：
loader:['style-loader','css-loader']

（3）使用use + loader：

use: [{
       loader: "style-loader"
     }, {
       loader: "css-loader",
       options:{}
     }]

 

plugin：就是一个扩展器，它丰富了wepack本身，针对webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，例如

• run：开始编译
• make：从entry开始递归分析依赖并对依赖进行build
• build-module：使用loader加载文件并build模块
• normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
• program：开始对AST进行遍历，当遇到require时触发call require事件
• seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
• optimize-chunk-assets：压缩代码
• emit：把各个chunk输出到结果文件

通过对节点的监听，从而找到合适的节点对文件做适当的处理。

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

1、打包HTML，要将 HTML 文件从 src 目录下打包到 dist 目录下，需要借助 html-webpack-plugin 插件

2、JS压缩，在webpack中JS压缩使用的是 uglifyjs-webpack-plugin插件。