欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Webpack笔记

程序员文章站 2022-07-12 19:53:00
...

 

入口

entry(string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })),每个模块的入口
entry: {
      element: ['element-ui'],
      vue: ['vue', 'axios', 'vue-router', 'vuex'],
      app: './src/main.js'
    },

输出

output位于对象最*键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

output: {
      path: path.resolve(__dirname, outputPath),
      publicPath: host,
      filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '')
    },

path(string)

output 目录对应一个绝对路径。模块打包输出的文件路径

publicPath 对应模块在html的引用路径(加载外部资源)
 
filename 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下
 
此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下

module

rules

创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。

 

{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
 },

 

 

resolve

 

这些选项能设置模块如何被解析,一般用于快速引入模块包

 

resolve: {
      alias: {'@': path.resolve(__dirname, '../src'),
        'lib': path.resolve(__dirname, '../static'),
        'scss': path.resolve(__dirname, '../src/scss/')
      },
      extensions: [".js"]
    }

 alias

创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:

如上的alias,在组件内引用store
import storefrom '../../store';

可以写成 

import store from @/store';

extensions

自动解析确定的扩展,可以不写文件后缀。

plugins

选项用于以各种方式自定义 webpack 构建过程

webpack.optimize.CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3,
    }),

 

有助于提取这些依赖到共享的 bundle 中,来避免重复打包

CopyWebpackPlugin

new CopyWebpackPlugin([{
        from: path.resolve(__dirname, '../static'),
        to: '',
        ignore: ['.*']
      }]),

 

直接拷贝到dist文件,不通过编译

webpack.DefinePlugin

new webpack.DefinePlugin({
        'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
        'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV],
        'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV]
      }),

将一些配置插入环境中,在业务代码内可以使用 process.env 访问

webpack.optimize.UglifyJsPlugin

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      })

代码的压缩配置

HtmlWebpackPlugin

new HtmlWebpackPlugin({
        title: '消息推送平台',
        template: 'index.html',
        filename: '../index.html',
        inject: false,
        path: host,
        chunks: ['element', 'vue', 'app']
      }),

打生产包时候读取的配置

Server

 

 

 

 

转载于:https://www.cnblogs.com/peace1/p/webpack_baseinfo.html