webpack四个基本概念

分手后的思念是犯贱 2022-05-30 01:43 202阅读 0赞

记性不好的我又来拉。

**webpack** 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

> [webpack官方文档][webpack]

### webpack主要有四个概念： ###

*  入口（entry）
 *  出口（output）
 *  插件（plugins）
 *  加载器（loader）

--------------------

### 以vue webpack配置为例 ###

// webpack.base.conf.js
    entry: {    
        app: './src/main.js'  
    },  
    output: {    
        path: config.build.assetsRoot,    
        filename: '[name].js',    
        publicPath: process.env.NODE_ENV === 'production'  
        ? config.build.assetsPublicPath 
        : config.dev.assetsPublicPath  
    },
    module: {
        rules: [
           {        
              test: /\.vue$/,
              loader: 'vue-loader',
              options: vueLoaderConfig      
           }, 
          {
              test: /\.js$/,
              loader: 'babel-loader',
              include: [resolve('src'), resolve('test'),resolve('node_modules/webpack-dev-server/client')]
          },
     }

1.  入口（entry）  
    入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。  
    对于vue来说就是main.js。
2.  出口（output）  
    output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
3.  加载器（loader）  
    loader 用于对模块的源代码进行转换  
    例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader，如上示例中是vue和babel的加载器。
4.  插件（plugins）  
    插件目的在于解决 loader 无法实现的其他事。

![这里写图片描述][70]

[webpack]: https://doc.webpack-china.org/concepts/
[70]: /images/20220530/4f05b18955c346969e0b7282b598663f.png